? ? ? ?很久前我曾經[提到](http://blog.csdn.net/hfahe/article/details/7338032)過[**Web Speech API**](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html)，現在Chrome剛剛發布的25版本已經為桌面和Android提供了對此API的支持，這對Web開發者來說無疑是一個具有里程碑意義的事件，因為我們可以直接在Web App中原生使用語音識別技術，Web應用的新時代將會由此開啟。 ??????? 控制不住激動的心情，下面我會通過示例馬上給大家介紹此API的詳細信息。 ??????? Google專門提供了一個[原生示例](https://www.google.com/intl/en/chrome/demos/speech.html)，來演示Web Speech API。  ? ? ? ?我們來看看實現代碼。首先需要判斷瀏覽器是否支持Web Speech API，我們通過window下是否存在webkitSpeechRecognition對象來判斷。如果支持，我們創建webkitSpeechRecognition對象，并設置相關屬性和事件。 ~~~ if (!('webkitSpeechRecognition' in window)) { upgrade(); } else { var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onstart = function() { ... } recognition.onresult = function(event) { ... } recognition.onerror = function(event) { ... } recognition.onend = function() { ... } ... ~~~ ? ? ? ?continuous屬性的默認值是false，代表當用戶停止說話時，語音識別將結束。在這個[演示中](https://www.google.com/intl/en/chrome/demos/speech.html)?，我們將它設置為true，這樣即便用戶暫時停止講話，語音識別也將會繼續。 ? ? ? ?interimResults屬性的默認值也是false，代表語音識別器的返回值不會改變。在這個演示中，我們把它設置為true，這樣隨著我們的輸入，識別結果有可能會改變。仔細觀看演示，灰色的文字是臨時性的，有時會改變，而黑色文本是最終結果，不會改變。 ? ? ? ?當我們點擊麥克風按鈕時，會觸發如下代碼： ~~~ function startButton(event) { ... final_transcript = ''; recognition.lang = select_dialect.value; recognition.start(); ~~~ ? ? ? ?我們用recognition.lang來設置語音識別的語言，在這個示例中默認為HTML頁面的語言，通過下拉列表用戶可以進行更換，例如“cmn-Hans-CN”代表普通話，而“en-us”代表美式英語。Chrome瀏覽器的語音識別支持眾多的語言，非常強大。 ? ? ? ?設置語言后，我們調用recognition.start()來激活語音識別。一旦開始捕獲音頻，它調用onstart方法，然后為每一個新的結果集調用onresult方法進行處理。 ~~~ recognition.onresult = function(event) { var interim_transcript = ''; for (var i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { final_transcript += event.results[i][0].transcript; } else { interim_transcript += event.results[i][0].transcript; } } final_transcript = capitalize(final_transcript); final_span.innerHTML = linebreak(final_transcript); interim_span.innerHTML = linebreak(interim_transcript); }; } ~~~ ? ? ? ?這個handler把結果分成兩個字符串：final_transcript和interim_transcript。這里調用Linebreak方法來進行分段。最后，它會將final_transcript設置為final_span的innerHTML，顯示為黑色；而將interim_transcript設置為interim_span的innerHTML，顯示為灰色。 ? ? ? ?以上就是功能核心代碼。當recognition.start()被調用時，麥克風識別動畫開始顯示，同時Chrome需要獲得用戶對麥克風的授權。有一點非常重要的是，**HTTPS網頁不需要反復獲取授權，而HTTP**網頁需要**。  ? ? ? ?當開始語音輸入、捕獲和識別時，我們還會在桌面右下角看到相關提示。   ? ? ? ?從現在開始，Web App的開發者們可以好好考慮考慮，利用Web Speech API能夠開發出什么樣有趣的產品，或者為自己的產品添加什么有趣的功能？ ? ? ? ?提示：如果要體驗文中的Demo，請使用Chrome 25以上的版本或者Chrome Canary。 ? ? ? ?相關文章：《[對HTML5 Device API相關規范的解惑](http://blog.csdn.net/hfahe/article/details/7338032)》 ? ? ? ?參考文章：[VOICE DRIVEN WEB APPS: INTRODUCTION TO THE WEB SPEECH API](http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API) ? ? ? ?轉載請標明出處：[蔣宇捷的專欄](http://blog.csdn.net/hfahe)