YIXUNFE
commented
8 years ago 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” 属性才会生效 :sob:。
在 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() 查看可以支持的语言。
HTML5 Speech API