HTML5 之音频合成（SpeechSynthesis）

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

一、语音场景

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

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

这些都是随处可见的例子，但真正燃起我激情的是这个 场景 ，简直酷炫到爆：

二、技术核心

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

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

事情的真相就是简单如此，短短两行，就实现了语音播报。

三、兼容性

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

四、API 文档

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

五、完整示例

六、补充：SpeechRecognition

SpeechRecognition 顾名思义，语音识别，属于 网页语音 API 。需要麦克风等音频输入设备的支持，可以识别用户的语音输入，并且转化成文字。

SpeechRecognition API 需要硬件支持，所以兼容性并不好，大致如下：

七、未来畅想

相信不久的未来，浏览器会逐步统一，兼容问题将会化为乌有。我们将会用更多的时间去探索技术，而不是去兼容老破旧的网站或者机器。当然，Web 技术会大行其道，用户将会拥有到更加有趣的体验。今天，我们迈进了一步！