HTML语音,html5 语音聊天
听完之后你会发现，播放出来的声音并不是预先录制的音频数据，而是经过字符识别后的合成语音。
请先戴上耳机，然后把下面的代码复制到chrome控制台里体验一下~
Msg=新的语音合成(欢迎阅读我的博客)；window . speech synthesis . speak(msg)；看，前端实现语音合成并不难。
今天的主角 Speech Synthesis API
通过上面的例子，我们可以猜测上面调用的两个方法的功能。
语音合成isutterancwindow . speech synthesis . speech当然语音合成包括的不仅仅是这两个API，不过还是先从这两点说起吧。
SpeechSyntehesisUtteranc
参考：developer.mozilla.org/en-US/docs/.Speech Synteheisutteranc对象包含语音服务要读取的内容和一些参数，如语言、音高和音量。
Speech SynthhesisOutterance()语音合成界面。语言合成。音高语音合成。速率语音合成干扰。语音合成干扰。卷注：以上属性均为读/写！您可以复制下面的代码并尝试一下。评论里会有解释。
let msg=new speechsynthesisuterance()；msg . Text= how are you //Text to be synthetic msg . lang= en-US //美式英语发音(默认自动选择)msg.rate=2 //倍速(默认为1，范围0.1 ~ 10)msg . pitch=2//高音(数字越大越尖，默认为0 ~ 2)msg . volume=0.5//音量0.5倍(默认为1，范围0 ~ 1)window . speech synthesis . speak(msg)；同时，该对象还可以响应一系列事件，这些事件可能被使用：
Start Boundary Pause Resume借助这些事件，我们可以完成一些简单的功能，比如统计英语句子的字数：
设count=0；//字数let msg=新语音合成度()；let synth=window . speech synthesis；Msg.addEventListener (start ，()={//开始读取console . log(` text content:$ { msg . text } `))；console . log(“start”)；});味精。AddEventListener (end ，()={//读取console.log的结束( End )；Console.log(`文本字数(字数):$ { count } `)；count=0；});Msg.addEventListener (boundary ，()={//统计字数；});尝试后，由于中文没有用空格分隔每个单词，所以会自动识别。例如，欢迎读者将被识别为欢迎和读者。
SpeechSynthesis
参考：developer.mozilla.org/en-US/docs/…
说到这里，我们来看看SpeechSynthesis。
语音合成的主要功能是控制语音，如开始或暂停。
它有三个只读属性，表示声音的状态：
语音合成。PausesSpeech合成。待定还有一系列操纵语音的方法：
SpeechSynthesis.speak()开始读取语音并触发start事件。
SpeechSynthesis.pause()暂停并触发暂停事件。
SpeechSynthesis.resume()继续，同时触发resume事件。
SpeechSynthesis.cancel()取消读取并触发结束事件。
基于这些操作方法，我们可以进一步增强我们的文本阅读器：
回到最初的起点
让我们回到最初的起点。基于以上内容，我们可以猜测一些网站是如何实现文章自动阅读的。
如果这个网站的前端采用MVVM框架(以Vue为例)，那么文章的内容可能会被存储在数据中，这些数据可以用来构造我们需要的语音合成。
当然也有可能是通过ajax请求获取文章，解析请求的数据构造语音合成对象。
如果文章是直接用html写的，这时候就要解析DOM了。经过测试，甚至出现了以下混乱的结构
div id= test P1/p p2/p ul li3/Li li4/Li/ul table tr td5/TD td6/TD/tr tr td7/TD td8/TD/tr/table img src= https://www . Baidu . com/img/Bd _ logo 1 . png alt= 9/div直接通过innerText读取文本，然后构造一个语音合成对象，该对象也可以按所需顺序读取(图片将被忽略)
当然，如果想忽略一些特殊的结构，比如表格，可以花点精力解析，过滤掉不想要的数据或者DOM元素。
不管怎样，都能找到合适的解决方法~
闲话
这个功能还在草案中，没有得到广泛支持。
同样，这个API还不能应用于生产环境。
目前普遍的做法是在后端构造一个将文本合成为语音文件的API(或许是第三方API)，然后在前端作为媒体播放。
有一次迷茫的时候，去读了一些大牛的文章，看了一些前辈对前端开发的思考。有一件事让我印象深刻：
前端离用户最近，一切都要站在用户的角度考虑。无障碍使用也是一个很重要的话题。虽然做这样一个功能的收益远不如其他业务，但是为了让产品更好的服务用户，付出更多的努力是值得的，这也是一种前端开发的精神。
总结
以上就是边肖推出的鲜为人知的HTML5语音合成功能。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。