怎么 在HTML5中实现一个语音合成功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
Speech Synthesis API
通过上面的例子我们可以猜测到上面调用的两个方法的功能
计算
安全
数据库
网络和加速
企业服务
SpeechSyntehesisUtteranc
window.speechSynthesis.speak当然了，语音合成不仅仅包含这两个API，but我们先从这两点入手
SpeechSyntehesisUtteranc
参考：developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc 对象包含了语音服务要读取的内容和一些参数，比如语言，音高和音量
SpeechSyntehesisUtteranc()
SpeechSynthesisUtterance.lang
SpeechSynthesisUtterance.pitch
SpeechSynthesisUtterance.rate
SpeechSynthesisUtterance.voice
SpeechSynthesisUtterance.volume注意：以上属性都是 可读写 的！ 可以把下面这段代码copy下来尝试一下，注释中会有说明
let msg = new SpeechSynthesisUtterance();
msg.text = "how are you" // 要合成的文本
msg.lang = "en-US" // 美式英语发音（默认自动选择）
msg.rate = 2 // 二倍速（默认为 1，范围 0.1～10）
msg.pitch = 2 // 高音调（数字越大越尖锐，默认为 1，范围 0～2 ）
msg.volume = 0.5 // 音量 0.5 倍（默认为1，范围 0～1）
window.speechSynthesis.speak(msg);同时这个对象还可以响应一系列事件，可能会用到的：
start
end
boundary
pause
resume
借助这些事件我们可以完成一些简单的功能，比如英文句子的单词数量统计：
let count = 0; // 词语数量
let msg = new SpeechSynthesisUtterance();
let synth = window.speechSynthesis;
msg.addEventListener('start',()=>{
// 开始阅读
console.log(`文本内容： ${msg.text}`);
console.log("start");
});
msg.addEventListener('end',()=>{
// 阅读结束
console.log("end");
console.log(`文本单词（词语）数量：${count}`);
count = 0;
});
msg.addEventListener('boundary',()=>{
// 统计单词
count++;
});经过尝试，由于中文没有用空格将每个词语分开，所以会进行自动的识别，比如 欢迎读者 会被识别为 欢迎 和 读者 两个词语
SpeechSynthesis
参考： developer.mozilla.org/en-US/docs/…
说完了 SpeechSyntehesisUtteranc 我们再来看看 SpeechSynthesis
SpeechSynthesis 的主要作用是对语音进行一系列的控制，比如开始或者暂停
它有三个只读属性，表明了语音的状态：
SpeechSynthesis.paused SpeechSynthesis.pending
同时还有一系列方法用来操作语音：
•SpeechSynthesis.speak() 开始读语音，同时触发 start 事件
•SpeechSynthesis.pause() 暂停，同时触发 pause 事件
•SpeechSynthesis.resume() 继续，同时触发 resume 事件
•SpeechSynthesis.cancel() 取消阅读，同时触发 end 事件
基于这些操作方法，我们可以进一步增强我们的文字阅读器：
回到最初的起点
让我们回到最初的起点，我们可以基于上面的内容猜测一下有些网站中，文章的自动阅读是怎么实现的
如果这个网站前端采用了 MVVM 框架（以 Vue 为例），那么文章内容是也许存储在 data 中，可以用来构造我们需要的语音合成
当然，也有可能文章是通过 ajax 请求得到的，解析请求的数据，构造语音合成对象
如果文章是直接在 html 中写死的，这个时候就需要对 DOM 进行解析，经过测试，即便是下面这样的混乱的结构
<div id="test">
<p>1</p>
<p>2</p>
<ul>
<li>3</li>
<li>4</li>
</ul>
<table>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
9
</div>看完上述内容，你们掌握怎么 在HTML5中实现一个语音合成功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/html5/673559.html
