語音驅動網頁應用程式 - Web Speech API 簡介

有了全新的 JavaScript Web Speech API，您就能輕鬆在網頁中加入語音辨識功能。透過這個 API，您可以精細控制 Chrome 25 以上版本的語音辨識功能，並靈活運用。以下範例顯示，使用者說話時，系統幾乎會立即顯示辨識出的文字。

Web Speech API 示範

客層 / 來源

讓我們深入瞭解背後的運作方式。首先，我們會檢查 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 文件根元素和階層的 lang。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」，例如使用者說出「新段落」時，因此我們使用 linebreak 函式將這些字串轉換為 HTML 標記 <br> 或 <p>。最後，它會將這些字串設為對應 <span> 元素的 innerHTML：final_span (樣式為黑色文字) 和 interim_span (樣式為灰色文字)。

interim_transcript 是區域變數，每次呼叫這個事件時都會完全重建，因為自上次 onresult 事件以來，所有暫時結果都可能已變更。只要從 0 開始執行 for 迴圈，final_transcript 也可以採用相同做法。不過，由於最終文字永遠不會變更，我們將 final_transcript 設為全域，讓這個事件可以在 event.resultIndex 啟動 for 迴圈，並只附加任何新的最終文字，藉此提高這裡的程式碼效率。

這樣就大功告成了！其餘程式碼只是為了讓所有內容看起來美觀。這個類別會維護狀態、向使用者顯示一些資訊訊息，並在麥克風按鈕上切換 GIF 圖片，包括靜態麥克風、麥克風斜線圖片和麥克風動畫 (附有閃爍的紅點)。

系統會在呼叫 recognition.start() 時顯示麥克風斜線圖片，並在 onstart 觸發時替換為麥克風動畫。通常這項作業會快速完成，因此使用者不會注意到斜線，但首次使用語音辨識功能時，Chrome 必須要求使用者授予麥克風使用權，在這種情況下，只有在使用者允許權限時，才會觸發 onstart。透過 HTTPS 代管的網頁不需要重複要求權限，但透過 HTTP 代管的網頁則需要。

因此，請啟用網頁的聆聽功能，讓網頁與使用者互動！

歡迎提供意見回饋...

如要瞭解隱私權政策 (更新日期：2026 年 6 月 16 日)，請參閱「瞭解 Chrome 的隱私權」。