HTML5 Web Speech API，让网站更有趣

Web API 变得愈来愈丰富，其中一个值得注意的是Web Speech API。传统的网站只能“说”，这个API的出现，让网站能“倾听”用户。这个功能已经开放了一系列的用法，很是棒。

在这篇文章中，咱们将看一下这项技术和建议的用法，以及如何用它来加强用户体验的一些好例子。

声明：本技术比较前沿，目前该规范是W3C的“非官方编辑器的征求意见稿”（截至2014年6月6日）。它的使用方法可能和本文中的代码片有所不一样。查看代码规范和发布前的测试是颇有必要的。

语音合成 Speech Synthesis

该API分为两部分。首先，让咱们来看看语音的合成部分——说话。若是你的网站有一些文字内容——文章主体、表单、输入框、标签等——你能够运行一些有趣的功能，设备就会把文字读给用户听。

来看看作到这一点所须要的代码。首先建立SpeechSynthesisUtterance接口的新实例。而后指定要阅读的文本。再把这个实例添加到队列中，告诉浏览器何时说话。

下面的speak函数里完成了上面所述的功能 ，把想要朗读的内容做为参数。

function speak(textToSpeak) {
   //建立一个 SpeechSynthesisUtterance的实例
   var newUtterance = new SpeechSynthesisUtterance();

   // 设置文本
   newUtterance.text = textToSpeak;

   // 添加到队列
   window.speechSynthesis.speak(newUtterance);
}

如今咱们须要作的就是调用这个函数，并传入咱们想要朗读的内容：

speak('Welcome to Smashing Magazine');

SpeechSynthesisUtterance还有开始、暂停、中止功能，还能设置语言、速度、声音。中止、启动或暂停都触发一个事件，开发者能够编写这个事件来完成不少有趣的事情。

目前，语音合成只有Chrome和Safari（包括桌面和移动设备版）支持。此外，经过API提供给用户的声音在很大程度上取决于操做系统。谷歌有本身的一套给Chrome的默认声音，能够在Mac OS X，Windows和Ubuntu上使用。Mac OS X的声音也可用，因此和OSX的Safari的声音同样。你能够经过开发者工具的控制台看有哪一种声音可用。

window.speechSynthesis.getVoices();

若是你使用OS X，能够用“Zarvox”声音

语音识别 Speech Recognition

Web Speech API另外一部分是语音识别，它可以识别用过从麦克风或网站应用获取的语音。

让咱们经过一些代码运行。这一次，咱们将建立SpeechRecognition的新实例。由于这部分只获得了Chrome的支持，因此要添加WebKit的前缀。

var newRecognition = webkitSpeechRecognition();

peechRecognition有至关多的属性。好比状态是可连续的，浏览器在没有接收到声音的一段时间后默认把状态设为false，若是你想继续听，能够设为true。

newRecognition.continuous = true;

开启和中止语音识别，使用start() 、 stop()：

// 开始
newRecognition.start();

// 中止
newRecognition.stop();

还能够绑定不少事件，例如：soundstart、speechstart、result 、 error。看看这个demo。

使用场景举例

听写

目前，Speech API最多见的用法是听写和读取。也就是用户经过麦克风说话，设备把语音翻译成文字（看看Chrome开发团队作的demo），或者设备读取文字转化成语音。

设备能说话这是很是有用的功能。设想一下，当你早上起床的时候，镜子告诉你今天的天气，这多么神奇。

不少汽车都有语音系统，在你开车的时候给你导航。设想一下，当你在开车的时候，浏览器把你想要的内容读给你听，多么方便。

声音控制

听写能够很容易地变成语音控制。正如上面的例子，咱们能够经过语音导航。若是把这个功能加入到网络电视的浏览器中，将会有更多有意思的实现。

个人同事作了个网球应用，在他打球的时候，它的应用会把他的分数读出来。

翻译

将来翻译会变得很不同。一我的说了一段话，设备就翻译成对方的语言并读出。

限制

离线是须要注意的问题。目前API的实现是浏览器把数据发送到远端服务器，再把处理好的数据返回。没有网络就没法实现功能。

---

英文原文： Enhancing User Experience With The Web Speech API 由SegmentFault整理翻译