网页语音合成API简介

h5提供了语音合成的api,包括SpeechSynthesis、SpeechSynthesisUtterance,现在的mdn上介绍说这是一个实验中的功能,但是从兼容性列表可以看到,除了移动端的opera和安卓webview,支持性是很友好的。

window 语音输入 jquery 插件 语音插件不能正常运行_语音合成

window 语音输入 jquery 插件 语音插件不能正常运行_speechSynthesis_02


情景1、操作系统不支持tts功能

尽管上面提到了api的兼容性是很友好的,不代表就能够顺利的运行,因为这个api还依赖于系统的朗读引擎,有的ghost或是精简版的windows系统会可能对其进行了删改。
解决办法是要把它再装回来即可,搜索下载[tts修复补丁],按照对应下载程序的步骤安装即可。如

win7系统tts语音引擎修复补丁|tts语音引擎修复补丁win7 官方最新版 下载_当下软件园_软件下载

(经过多台win7测试这个链接的补丁不总是有效)

判断系统是否有这个功能,可以看[控制面板-轻松访问-轻松访问中心-使用没有显示器的计算机]中“设置文本到语言转换”操作中进行试行,如果不支持,会有如下提示

window 语音输入 jquery 插件 语音插件不能正常运行_speechSynthesis_03

window 语音输入 jquery 插件 语音插件不能正常运行_windows_04



情景2、api执行但是没有声音

执行播放方法,但是没有任何声音,该问题定位下来是由于系统的语音包没有被正确选择。
SpeechSynthesisUtterance有两个属性可以设置语音包,第一个是通过lang来设置语言,比如设置为'zh-CN',根据系统安装的应用程序,同一个lang下面可能会存在多个语言包,系统就会自动匹配一个满足这个条件的语音包,问题就出现在这里,系统匹配的这个语音包如果是第三方的,在网页语音合成中可能无法使用,线上遇到的问题也是这个造成的。如下图所示,

window 语音输入 jquery 插件 语音插件不能正常运行_语音合成_05

调用getVoices方法可以看到,这有两个zh-CN,而且第一个default为true的是第三方软件安装的,匹配到这个导致无法播放。
第二个设置语音包的方法是可以直接设置SpeechSynthesisUtterance.voice,赋值即为上面getVoices获取的对象。这里的话设置成name为“Microsoft Simmplified Chinese”即可,注意,不同的浏览器name可能会不同,比如在chrome浏览器中就是“Google 普通话(中国大陆)”。

window 语音输入 jquery 插件 语音插件不能正常运行_语音合成_06

localService和default的属性似乎不太值得信任,最终解决方案选择找到安装了第三方的应用将其删除解决,如果这个应用不能够被删除的话,目前看来通过name进行自行匹配,或者直接提供手动选择的方式更加可靠。
向电脑添加语音方法见