HTML5 Speech API

[YIXUNFE]

HTML5 Speech API

[YIXUNFE]

HTML5 Speech API

语音识别技术在苹果推出 Siri 后异常火爆，国内还出现过与苹果公司就语音专利技术打官司的事情。今天我们讲一下如何使用浏览器进行语音识别。

Speech Recognition API

Google Chrome 在几年前就已经实现了语音识别的功能（其他浏览器至今没有该功能），当时在网页中简单的嵌套一个 input 元素并加上 x-webkit-speech 属性即可。

<input type="text" x-webkit-speech />

然而高级版本的 chrome 则使用 Speech Recognition API 替代上述方案。

首先我们需要实例化一个 SpeechRecognition 对象：

var recognition = new webkitSpeechRecognition()

接着我们需要给 SpeechRecognition 对象绑定各种事件：

recognition.onaudiostart = function() {
  console.log("Speak now...");
};

recognition.onaudioend = function() {
  console.log("Speak end...");
};

recognition.onnomatch = function() {
  console.log("Try again please...");
};

recognition.onerror = function(e) {
  console.log("Error. Try Again...");
};

recognition.onresult = function (e) {
  console.log(e)
};

在 onresult 事件中获得的是一个 SpeechRecognitionEvent 对象，它的 results 属性就是语音匹配的结果，按照匹配度排序，最匹配的结果会被排在第一位。结果中的每一个成员都是 SpeechRecognitionResult 对象，该对象的 transcript 属性是实际匹配的文本，confidence 属性是可信度，值介于0，1之间。

recognition 对象还有 start 和 stop 方法：

recognition.start()

recognition.stop()

顾名思义，即使开始录音与停止录音，稍微注意的是，Chrome 在执行 start 方法后，会弹出一个确认框，需要用户同意使用麦克风。

---

到这里仍稍显完美，可惜的是，此功能需要在 Chrome://flags 中开启了 “实验性 javascript” 属性才会生效 😭。

Google 演示地址，需翻墙

在 XP 系统 Chrome 44 版本中，仅仅使用 input x-webkit-speech，却可实现语音识别功能。

Speech Synthesis API

前面提到的是语音识别，这里再说说语音合成 API，目前该 API 在 Chrome 中也需要启用实验性功能。

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

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

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

其中的 SpeechSynthesisUtterance 对象具有开始、暂停、重置等事件，text 属性则是需要合成语音的源内容，接着调用 speak 方法就行了。

如果你在 Chrome://flags 中启用了 “实验性 JavaScript ” 并重启浏览器后，就可以听到浏览器的声音了。

你也可以通过 SpeechSynthesisUtterance 对象的 lang 属性切换语言，比如需要朗读中文：

newUtterance.lang = 'zh-CN'

我们可以使用 speechSynthesis.getVoices() 查看可以支持的语言。

Thanks