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

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

语音朗读有百度开放的接口，大概写法如下：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的背景音乐标签就好了，比如如下几个：

//这种就是打开网页直接就朗读对应文字

//这种比较复杂，可以有很多设置参数，具体可以自己百度资料

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

var zhText = "需要朗读的文字";

zhText = encodeURI(zhText);

document.write("");

其实如上就可以，定义多个名称类似zhText的字段，调用不同的标签来实现文字，或者通过之前的处理来去掉文字的段落，最后定义到zhText中，这样就可以很方便的去更加自由的定义。

那么我现在就可以用杰奇cms举一个例子，实现打开文章自动朗读作品名称和作者。

杰奇在小说信息页的作品名称标签为：{?$articlename?}

杰奇在小说信息页的作者标签为：{?$author?}

那么就可以写一个js如下，放在articleinfo.html模板文件中：

var bName = "{?$articlename?}";

var bauthor = "{?$author?}";

bName = encodeURI(bName);

bauthor = encodeURI(bauthor);

document.write("");

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

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

打赏

支付宝支付

您的大名：

1 元

5 元

10 元

20 元

50 元

100 元

万水千山总是情，给个打赏行不行。

打赏

本文来自投稿，不代表本站立场，如若转载，请注明出处：https://www.ruletree.club/archives/353/

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_39880328/article/details/117838406
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2023-01-03 21:55:54
阅读 ( 296 )
分类：前端

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看