JS 简单调用百度TTS接口实现语音朗读

TTS简介

TTS是Text To Speech的缩写，即“从文本到语音”，是人机对话的一部分，让机器能够说话。网页作为世界之窗，自然是向所有人开放的，所以也就包括视力不好的人群了，而网页语音化并不是什么新技术，HTML语义化在某种层次上也是为了让网页语音化更好的实现。

正文

简单实现语音朗读，要说多简单，直接用别人的接口算不算简单？
我们要做的就是借用百度TTS接口，通过audio标签进行朗读。实现核心如下：

1. 需要一个audio标签，包括其中的source标签，对audio标签不了解的可以去W3C HTML5音频教程看看
2. 在audio的子标签source中设置src，具体内容为：src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=8&text="+content (content是要朗读的内容)
   参数：{
   lan:语言，
   ie:编码，
   spd:语速(1-9)，
   text:要朗读的内容
   }
3. audio标签可自定义controls,autoplay等标签特性，实现控制（可选）
   audio标签主要通过js添加，HTML代码如下

JS代码

    var content = "hello"
    var s = docuement.querySelector("#tts_source")
    s.src = s.src + content
    s.parentNode.load()

由于修改了audio的source标签，需要对audio进行刷新重加载，故用s.parentNode.load()方法

总结

该方法灵活性不太好，想要朗读网页内容需要获取不同的标签，而且内容文本不能过大（由于写入的文本是通过Get方式传给百度接口的，传送的文本数量受Get URL 请求的限制,不同的浏览器限制大小不尽相同，且中文占字符数较多）

附文

网页添加以下脚本可实现文本框输入值后进行朗读