原文：http://www.smashingmagazine.com/2014/12/05/enhancing-ux-with-the-web-speech-api/

介绍

对于传统web来说，基于语音的交互是一项非常前沿的技术，离实际应用还比较遥远。虽然W3C中的Web Speech API也是处于非官方的草稿阶段，但是依然建议仔细阅读，看下谷歌的同学是怎么规划未来的语音交互API的。

而在移动端，大部分输入法都已经支持语音输入，siri的出现也让大家更加认识到其实语音交互是可以替代手动输入的。

对于无障碍来说，通过复杂的tab加方向操作，是肯定没有直接语音支持导航和响应来得方便，所以页面本身语音后续一定是无障碍发展的重要方向之一。

之前的x-webkit-speech规范已经被chrome抛弃。

原来我们是这么用speech功能的：

<input type="text" x-webkit-speech="" x-webkit-grammar="builtin:translate"/>

然后通过element.onwebkitspeechchange可以来监听用户输入，进行对应的一些操作。

老规范的问题也比较明显，只能支持input和textarea这样的元素，且对输入控制也不够灵活。

下面看下新规范是怎么设计的。

新的API包含两个部分，发音和识别。

发音

理论上，页面中所有的文案都有需要用语音读出来的场景，特别是提供一些提示信息或者替代信息的地方。比如我们会用alt属性来替代图片本身的内容，那么alt对于视觉障碍的用户，就需要用发音的方式来替代简单展示文字（当然，当前有很多读屏器可以实现这个方案）。

一个简单的speak方法。

function speak(textToSpeak) {
    // 创建一个SpeechSynthesisUtterance实例
    var newUtterance = new SpeechSynthesisUtterance();
    // 设置要发音的内容
    newUtterance.text = textToSpeak;
    // 添加在发音队列中
    window.speechSynthesis.speak(newUtterance);
}

代码本身其实比较简单，需要添加到发音队列的原因也是保持一次只有一个实例处于发音状态。

调用代码：

speak('Welcome to Smashing Magazine');

不过我在OS X上测试，当前貌似还不支持中文的发音。

识别

识别使用到的就是webkitSpeechRecognition对象。

通过设置newRecognition.continuous的属性为true，可以让浏览器始终进行语音识别，默认是false。

也可以通过设置recognition.lang来固定识别的语言类型。

// 开始语音识别
newRecognition.start();
// 结束语音识别
newRecognition.stop();

整个过程中，我们可以通过监听soundstart、speechstart、result、error等事件来控制识别过程。具体见demo

简单的监听案例：

var recognition = new webkitSpeechRecognition();
recognition.onresult = function(event) { 
    console.log(event) 
}
recognition.start();

result对象的内容：

{
    ..    
    results: {
        0: {
              0: {
                confidence: 0.695017397403717,
                transcript: "look Mum I'm talking into a web page!"
              },
              isFinal:true,
              length:1
        },
        length:1
    },
    ..
}

应用

• 自动进行语音翻译，还可以将翻译的内容再读出来，比如Web Speech API Demonstration
• 声音控制，比如使用声音控制进行翻页等页面上的操作，替代原来的鼠标操作。

限制

由于语音本身还是依赖谷歌提供的在线服务，所以离线使用还是存在一些问题。

相关项目

• voice elements
• speech input

参考内容

• http://shapeshed.com/html5-speech-recognition-api/
• https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html
• http://www.smashingmagazine.com/2014/12/05/enhancing-ux-with-the-web-speech-api/