HTML5语音合成Speech Synthesis API

关于语音合成Speech Synthesis API

先从最简单的例子说起，如果想让浏览器读出“你好，世界！”的声音，可以下面的JS代码:

let utterThis = new window.SpeechSynthesisUtterance('你好，世界！');
window.speechSynthesis.speak(utterThis);

上面代码出现了两个长长的对象，SpeechSynthesisUtterance和speechSynthesis，就是语音合成Speech Synthesis API的核心。

首先是SpeechSynthesisUtterance对象，主要用来构建语音合成实例，例如上面代码中的实例对象utterThis。我们可以直接在构建的时候就把要读的文字内容写进去:

let utterThis = new window.SpeechSynthesisUtterance('你好，世界！');

又或者是使用实例对象的一些属性，包括：

• text – 要合成的文字内容，字符串。
• lang – 使用的语言，字符串， 例如：“zh-cn”
• voiceURI – 指定希望使用的声音和服务，字符串。
• volume – 声音的音量，区间范围是0到1，默认是1。
• rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
• pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1

因此上面的代码也可以写作：

let utterThis = new window.SpeechSynthesisUtterance();
utterThis.text = '你好，世界！';

不仅如此，该实例对象还暴露了一些方法：

• onstart – 语音合成开始时候的回调。
• onpause – 语音合成暂停时候的回调。
• onresume – 语音合成重新开始时候的回调。
• onend – 语音合成结束时候的回调。

接下来是speechSynthesis对象，主要作用是触发行为，例如读，停，还原等：

• speak() – 只能接收SpeechSynthesisUtterance作为唯一的参数，作用是读合成的话语。
• stop() – 立即终止合成过程。
• pause() – 暂停合成过程。
• resume() – 重新开始合成过程。
• getVoices – 此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组，例如，在我的电脑下，Firefox浏览器返回的语言包是两个：

而在chrome浏览器下，数量就很惊人了：

其中，17是普通话大陆：

另外，getVoices的获取是个异步的过程，因此，你可以直接在控制台输入，speechSynthesis.getVoices()返回的是一个空数组，没关系，多试几次，或者搞个定时器之类的