## Web Speech 語音輸入 老版本中，如果我們要部署一個帶有語音搜索功能的input，可用如下代碼： ``` <input id="speech" type="search" x-webkit-speech speech /> ``` 然后通過webkitspeechchange事件來監聽用戶輸入： ``` var speech = document.getElementById('speech'); speech.onwebkitspeechchange = funciton(){ } ``` 注意：目前只有Chrome支持這種帶語音的輸入框。 在新版本中，我們還可以用JavaScript操作語音輸入，就是通過Web Speech這個API。（也是只有Chrome支持） 主要有兩部分： - 語言識別（將所說的轉換成文本文字） - 語言合成（將文本文字讀出來） **1、語言識別** **1.1 SpeechRecognition對象** 這個API部署在`SpeechRecognition`對象之上。 **1.1.1 檢測是否支持** ``` if ('webkitSpeechRecognition' in window) { // 支持 } ``` 確定支持后，新建一個`SpeedchRecognition`的實例對象： ``` if ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); } ``` **1.1.2 屬性和方法** **屬性** - continous：是否讓瀏覽器始終進行語言識別，默認為false，也就是說，當用戶停止說話時，語音識別就停止了。這種模式適合處理短輸入的字段。 - maxAlternatives：設置返回的最大語音匹配結果數量，默認為1 - lang：設置語言類型，默認值就繼承自HTML文檔的根節點或者是祖先節點的語言設置。 **方法** - start()：啟動語音識別 - stop()：停止語音識別 - abort()：中止語音識別 **1.1.3 事件** 瀏覽器會詢問用戶是否許可瀏覽器獲取麥克風數據 這個API提供了11個事件。 - audiostart：當開始獲取音頻時觸發，也就是用戶允許時。 - audioend：當獲取音頻結束時觸發 - error：當發生錯誤時觸發 - nomatch：當找不到與語音匹配的值時觸發 - result： 當得到與語音匹配的值時觸發，它傳入的是一個SpeechRecognitionEvent對象，它的results屬性就是語音匹配的結果數組，最匹配的結果排在第一位。該數組的每一個成員是SpeechRecognitionResult對象，該對象的transcript屬性就是實際匹配的文本，confidence屬性是可信度（在0到1之間） - soundstart - soundend - speechstart - speechend - start：當開始識別語言時觸發 - end：當語音識別斷開時觸發 看個實例： ``` <input id="speech" type="search" x-webkit-speech speech /> var speech = document.getElementById('speech'); if('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onaudiostart = function(){ speech.value = '開始錄音'; }; recognition.ononmatch = function(){ speech.value = '沒有匹配結果，請再次嘗試'; }; recognition.onerror = function(){ speech.value ='錯誤，請再次嘗試'; }; // 如果得到與語音匹配的值，則會觸發result事件。 recognition.onresult = function(event){ if(event.results.length > 0) { var results = event.results[0]; var topResult = results[0]; if(topResult.confidence > 0.5) { } else { speech.value = '請再次嘗試'; } } } } ``` **2、語音合成** 語音合成只有Chrome和Safari支持。 **2.1 SpeechSynthesisUtterance對象** 打開控制臺，黏貼下面的函數，然后調用： ``` funciton speak(textToSpeak){ var newUtterance = new SpeechSynthesisUtterance(); newUtterance.text = textToSpeak; window.speechSynthsisi.speak(newUtterance); } ``` **2.1 SpeechSynthesisUtteranc的實例對象的屬性** - text：識別的文本 - volume：音量（0~1） - rate：發音速度 - pitch：音調 - voice：聲音 - lang：語言類型 **2.2 window.speechSynthesis.getVoices()** 通過API提供給用戶的聲音在很大程度上取決于操作系統。谷歌有自己的一套給Chrome的默認聲音，可以在Mac OS X，Windows和Ubuntu上使用。Mac OS X的聲音也可用，所以和OSX的Safari的聲音一樣。你可以通過開發者工具的控制臺看有哪種聲音可用。 `window.speechSynthesis.getVoices()`用來獲取發音列表，返回一個數組，每個元素的name屬性表示聲音名稱 **2.3 window.speechSynthsisi.speak()** `window.speechSynthsisi.speak()`方法是用于發音的。