HTML5 之音频合成（Speech Synthesis）

H5 让我们的 Web 交互更加生动有趣，但浏览器的多样性以及挥之不去的兼容问题，却阻碍了技术发展。这并不是我们拒绝的理由，恰恰相反，它应该成为动力。

一、语音场景

文章标题为了严谨，所以叫音频合成。如果用大白话来解释，那就是「文字转语音」。语音的场景就太多了：

• 点读机：哪里不会点哪里
• 有声小说：看着太累，听起来不错
• Web 页面警示用户的操作
• 闹钟，提醒，小秘书
• 残疾人支持
  …

这些都是随处可见的例子，但真正燃起我激情的是这个场景，简直酷炫到爆。原来动画和语音结合起来才是最佳的用户体验。

二、技术核心

看完上面的动画，按捺不住内心的好奇，随手就翻起了源码。Oh～原来如此，把你揪出来：

1
2

let sayhello = new window.SpeechSynthesisUtterance('你好，欢迎来到 Jartto 的博客！');
window.speechSynthesis.speak(sayhello);

三、兼容性

如此有趣的 API，突然想到了一万个应用场景。别忙，先来看看 SpeechSynthesis 的兼容性吧：

看起来各大浏览器支持的还不错，那就试试呗！

四、API 文档

SpeechSynthesis 接口是语音服务的控制接口，属于网页语音 API，它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

• SpeechSynthesis.paused: 当 SpeechSynthesis 处于暂停状态时， Boolean 值返回 true 。
• SpeechSynthesis.pending: 当语音播放队列到目前为止保持没有说完的语音时， Boolean 值返回 true 。
• SpeechSynthesis.speaking: 当语音谈话正在进行的时候，即使 SpeechSynthesis 处于暂停状态， Boolean 返回 true 。
• SpeechSynthesis.onvoiceschanged: 当由 SpeechSynthesis.getVoices() 方法返回的SpeechSynthesisVoice 列表改变时触发。

此外，还有几个非常实用的方法：

• SpeechSynthesis.cancel(): 移除所有语音谈话队列中的谈话。
• SpeechSynthesis.getVoices(): 返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。
• SpeechSynthesis.pause(): 把 SpeechSynthesis 对象置为暂停状态。
• SpeechSynthesis.resume(): 把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。
• SpeechSynthesis.speak(): 添加一个 utterance 到语音谈话队列；它将会在其他语音谈话播放完之后播放。

五、代码演示

MDN Web Docs上面有个很形象的例子，我们拿过来学习学习：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var synth = window.speechSynthesis;
var voices = synth.getVoices();

if (synth.speaking) {
        
        
  console.error('Speaking');
  return;
}

var sayThis = new SpeechSynthesisUtterance('你好，欢迎来到 Jartto 的博客！');
sayThis.onend = function (event) {