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能力了。

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

0

打赏

f9dedae40642caf3cbefafd34bdd2e76.png支付宝支付

您的大名:

1 元

5 元

10 元

20 元

50 元

100 元

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

打赏

23343b78e9b269ca24c62490ceade6ea.png

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现功能,首先在数字报纸上使用:

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值