要讓網頁支持語音識別，最直接的方式是使用瀏覽器提供的 web speech api。1. 首先檢查瀏覽器是否支持該 api，可通過判斷 window 中是否存在 webkitspeechrecognition 或 speechrecognition 對象來確認，目前主流支持的瀏覽器為 chrome 和 edge，safari 與 firefox 支持有限；2. 接著初始化語音識別對象，通過 new 創建實例并設置參數，如語言、是否連續識別及是否返回中間結果；3. 然后監聽關鍵事件，包括 onresult 獲取識別結果、onerror 捕獲錯誤及 onend 監聽識別結束；4. 最后實現啟動與停止語音識別功能，通常綁定按鈕點擊事件調用 start() 與 stop() 方法，并注意用戶權限授予與網絡環境對識別準確率的影響。
要讓網頁支持語音識別，最直接的方式是用瀏覽器提供的 Web Speech API。這個 API 分為兩部分：語音識別（SpeechRecognition）和語音合成（SpeechSynthesis）。我們這里重點講語音識別的部分。
下面我們就一步步來看看怎么用 Web Speech API 來實現 html 頁面上的語音識別功能。
1. 檢查瀏覽器是否支持 Web Speech API
不是所有瀏覽器都支持語音識別功能，所以第一步是確認用戶使用的瀏覽器是否兼容。
立即學習“前端免費學習筆記（深入）”；
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) { // 支持語音識別 } else { console.log('當前瀏覽器不支持語音識別'); }
目前主流支持的是 Chrome 和 Edge 瀏覽器，Safari 和 Firefox 的支持情況有限。
2. 初始化語音識別對象
創建一個語音識別的實例，可以這樣寫：
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
然后你可以設置一些參數，比如語言、是否連續識別等：
recognition.lang = 'zh-CN'; // 設置語言為中文 recognition.continuous = false; // 不持續監聽，說一次停一次 recognition.interimResults = false; // 不返回中間結果，只返回最終結果
- continuous 控制是否連續識別；
- interimResults 決定是否顯示中間識別結果（邊說邊出文字）；
3. 監聽語音識別事件
語音識別過程是異步的，你需要綁定幾個關鍵事件來處理結果和狀態變化：
recognition.onresult = function(event) { const transcript = event.results[0][0].transcript; console.log('你說的是：', transcript); }; recognition.onerror = function(event) { console.error('識別出錯：', event.error); }; recognition.onend = function() { console.log('語音識別已結束'); };
- onresult 是獲取語音轉文字的核心回調；
- onerror 可以捕獲麥克風權限被拒等問題；
- onend 表示識別過程結束，可以在這里重新啟動或提示用戶操作。
4. 啟動和停止語音識別
有了上面的基礎之后，就可以讓用戶點擊按鈕開始說話了：
<button id="start">開始錄音</button> <button id="stop">停止錄音</button> <script> document.getElementById('start').onclick = () => { recognition.start(); }; document.getElementById('stop').onclick = () => { recognition.stop(); }; </script>
注意：有些瀏覽器在調用 start() 時會彈出請求麥克風權限的提示，如果用戶拒絕，后續識別就會失敗。
小細節補充：語音識別有時不太準？
這很正常，特別是在嘈雜環境下或者口音比較重的情況下。另外，語音識別依賴網絡（因為需要把音頻傳到服務器處理），所以網速慢也可能影響體驗。
如果你希望提高識別準確率，可以在安靜環境下測試，或者嘗試引導用戶使用標準普通話。
基本上就這些。Web Speech API 的語音識別功能雖然簡單，但已經能滿足很多場景的需求，比如語音輸入、語音控制頁面等。只要注意兼容性和用戶體驗，就能做出不錯的交互效果。
