新版 JavaScript Web Speech API 可讓您輕鬆將語音辨識技術新增至網頁。這個 API 可讓您精確掌控及靈活運用 Chrome 25 以上版本中的語音辨識功能。在以下範例中，辨識的文字幾乎會在說話時立即顯示。
讓我們一探究竟。首先，我們會檢查 webkitSpeechRecognition 物件是否存在，藉此確認瀏覽器是否支援 Web Speech API。如果沒有，我們建議使用者升級瀏覽器。(因為這個 API 仍在實驗階段，目前為供應商的前置字串)。最後，我們要建立提供語音介面的 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，表示當使用者停止說話時，語音辨識就會結束。這個模式適用於簡短輸入欄位等簡單的文字。在本示範中，我們將此值設為 True，這樣一來，就算使用者在說話時暫停，系統仍會繼續辨識。
interimResults 的預設值為 False，表示辨識器傳回的結果只有最終結果，因此不會變更。示範將這個值設為 true，是為了及早取得可能改變的暫時性結果。請仔細觀看示範影片，灰色文字是暫時性的文字，有時會變動，而黑色文字則是辨識工具提供的最終回覆，且不會改變。
如要開始，使用者點選麥克風按鈕，即可觸發以下程式碼：
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
我們將語音辨識器的語言設為「lang」設為使用者透過選項下拉式選單選取的 BCP-47 值；例如，英文是「en-US」。如未設定，系統會預設採用 HTML 文件根元素和階層的語言。Chrome 語音辨識功能支援多種語言 (請參閱示範來源中的「langs」表格)，以及本次示範未包含的某些由右至左語言，例如 he-IL 和 ar-EG。
設定語言後，我們會呼叫 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);
};
}
這個處理常式會將目前收到的所有結果串連成兩個字串：final_transcript 和 interim_transcript。產生的字串可能會包含「\n」，例如使用者說出「new paragraph」(新段落) 時，我們使用 linebreak 函式將這些字串轉換為 HTML 標記 <br> 或 <p>。最後，再將這些字串設為其對應 <span> 元素的內部 HTML：final_span 的樣式為黑色，而 interim_span 則以灰色文字樣式。
interim_transcript 是本機變數，每次呼叫此事件時都會完整重新建構，因為在上一個 onresult 事件之後，所有臨時結果都可能已變更。我們可以對 final_transcript 執行相同的操作，只要以 0 開始 for 迴圈即可。不過，由於最終文字永遠保持不變，我們將 final_transcript 變更為全域，以更有效率的方式編寫程式碼，讓此事件能在 event.resultIndex 開始 FOR 迴圈，並僅附加任何新的最終文字。
這樣就大功告成了！其他程式碼只是用來讓所有內容看起來漂亮。這個模式會維持狀態，向使用者顯示一些實用的訊息，並將麥克風按鈕上的 GIF 圖片切換在靜態麥克風、麥克風斜線圖片，並以閃爍紅點顯示麥克風圖片。
呼叫 recognition.start() 時，系統會顯示麥克風斜線圖片，並在 onstart 啟動時以麥克風動畫取代。一般來說，這種做法非常快速，無法察覺斜線，但第一次使用語音辨識時，Chrome 必須要求使用者授予麥克風使用權限。在此情況下，onstart 只會在使用者授予權限時觸發。透過 HTTPS 代管的網頁不需要重複要求權限，HTTP 代管網頁則不需要重複要求權限。
因此，讓他們聆聽你的意見，讓網頁更有活力！
我們非常希望收到您的寶貴意見...
請參閱《Chrome 隱私權白皮書》，瞭解 Google 如何處理這個 API 提供的語音資料。