网页通用,语音朗读功能实现教程

怎么说呢,比如进入网页的时候,会想起语音“欢迎来到XXX网”,感觉特别有逼格,或者你在看一篇文章的时候,响起朗读的声音,也会觉得不明觉厉。这个功能实现的原理我不清楚,但是配置并不难,无论什么网站都可以用上,一瞬间就可以让你网站出现朗读背景音,但是如果朗读的文字太多的话,也是会导致加载比较慢,毕竟调用的是外部接口。不过效果很给力,甚至可以显露出语气以及识别标点符号来分隔。

本文章部分参考:dxtui.com

语音朗读有百度开放的接口,大概写法如下:

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=朗读的文字

其中每个参数的含义如下:

lan=zh  设置语言为中文
ie=UTF-8  设置文字编码为utf-8 
spd=2  设置朗读速度,范围1-9
text=XX  设置将要朗读的文字  

完全可以试试朗读效果:点击进入

那么接口在这里,如何应用于网页呢?其实办法也不难,就用html的背景音乐标签就好了,比如如下几个:

<bgsound src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=朗读的文字" loop="-1">
//这种就是打开网页直接就朗读对应文字
<embed src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=朗读的文字" autostart="true" loop="true" width="80" height="20"> 
//这种比较复杂,可以有很多设置参数,具体可以自己百度资料

其实如上也显得不是太方便,毕竟有时候网站是自己通过标签来调用文字数据,那么就可以通过js将文字单独拿出来定义。

<script type="text/javascript"> 
var zhText = "需要朗读的文字"; 
zhText = encodeURI(zhText);
document.write("<embed height=\"0\" width=\"0\" src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text="+ zhText +"\">");
</script>

其实如上就可以,定义多个名称类似zhText的字段,调用不同的标签来实现文字,或者通过之前的处理来去掉文字的段落,最后定义到zhText中,这样就可以很方便的去更加自由的定义。
那么我现在就可以用杰奇cms举一个例子,实现打开文章自动朗读作品名称和作者。
杰奇在小说信息页的作品名称标签为:{?$articlename?}
杰奇在小说信息页的作者标签为:{?$author?}
那么就可以写一个js如下,放在articleinfo.html模板文件中:

<script type="text/javascript"> 
var bName = "{?$articlename?}"; 
var bauthor = "{?$author?}";
bName = encodeURI(bName);
bauthor = encodeURI(bauthor);
document.write("<embed height=\"0\" width=\"0\" src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text="+bName+bauthor+"\">");
</script>

这样,当你访问每个小说信息页的时候,网页就会自动出现小姐姐朗读作品名称及作者,是不是特别有逼格,更多的玩法看各位的js能力了。

教程规则之树独家,转载注明来源

本文由网友投稿或「聚码源码网」整理自网络,如转载请注明出处:https://www.jumaniu.com/14067/

本站发布的内容若侵犯到您的权益,请邮件联系 zhangqy2022#yeah.net 删除,我们将及时处理!

从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!

本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。

本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。

若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

常见问题
  • 本站所有资源解压密码为:www.jumaniu.com 或 www.tdji.cn
查看详情

相关文章

评论
暂无评论