H5網絡語音API：語音識別和綜合

Web Speech API 在現代網頁開發中用於實現語音識別與合成，其核心分為兩部分：SpeechRecognition 用於將語音轉文字，SpeechSynthesis 用於將文字轉語音。 1. 實現語音識別需創建SpeechRecognition 實例並設置參數如語言、是否連續識別，通過start() 啟動識別並監聽onresult 獲取結果，注意需用戶觸發且避免頻繁調用start()；2. 實現語音合成則創建SpeechSynthesisUtterance 對象設置文本、語言、語速等後調用speak() 播放，可使用pause()、resume()、cancel() 控製播放隊列，獲取語音列表建議監聽onvoiceschanged 事件；3. 實際應用中需注意移動端自動停止問題可在onend 中重啟識別，識別延遲應減少start/stop 調用頻率，合成不發音應檢查靜音、權限及語音源設置，並關注瀏覽器兼容性問題提供降級方案。

語音識別和合成在現代網頁開發中正變得越來越重要，尤其是在移動設備普及的今天。 H5 中的Web Speech API 提供了原生支持，讓我們可以在網頁中輕鬆實現語音輸入和輸出功能。如果你想知道怎麼用它來“聽”用戶的語音，或者讓網頁“說話”，那這篇文章就直奔主題。

一、什麼是Web Speech API？

Web Speech API 是瀏覽器提供的一組接口，允許網頁通過JavaScript 調用設備的語音識別和語音合成功能。目前主要分為兩個部分：

• SpeechRecognition（語音識別） ：將用戶說的話轉成文字。
• SpeechSynthesis（語音合成） ：讓網頁把文字朗讀出來。

這個API 目前在Chrome 和Edge 等基於Chromium 的瀏覽器中支持較好，Safari 和Firefox 支持有限，使用時需要注意兼容性問題。

二、如何實現語音識別？

語音識別是Web Speech API 最常用的功能之一，比如用於語音搜索、語音輸入等場景。

要開始識別語音，首先需要創建一個SpeechRecognition實例：

 const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

然後可以設置一些參數，比如是否連續識別、語言類型等：

 recognition.continuous = false; // 不連續識別，說一句停一句recognition.lang = 'zh-CN'; // 設置中文識別

接著就是啟動識別：

 recognition.start();

識別過程中會觸發多個事件，比如onresult表示識別結果返回了：

 recognition.onresult = function(event) {
    const transcript = event.results[0][0].transcript;
    console.log('你說的是：', transcript);
};

幾點注意事項：

• 需要用戶主動觸發識別行為（如點擊按鈕），否則可能被瀏覽器阻止。
• 多次調用start()前最好先調用abort()或stop() ，避免出錯。
• 在移動端測試更準確，因為麥克風質量通常更好。

三、如何實現語音合成？

語音合成適合用於語音助手、朗讀提示信息等場景。它的使用方式比識別更簡單。

首先創建一個SpeechSynthesisUtterance對象：

 const msg = new SpeechSynthesisUtterance();
msg.text = '你好，這是一條語音播報';
msg.lang = 'zh-CN';
msg.rate = 1; // 語速，默認是1
msg.pitch = 1; // 音調

然後調用speak()方法播放語音：

 window.speechSynthesis.speak(msg);

常見操作包括：

• 播放隊列：連續調用speak()會排隊依次播放
• 暫停/繼續：可以用pause()和resume()
• 取消所有播放：用cancel()

你還可以獲取系統支持的語音列表：

 const voices = window.speechSynthesis.getVoices();
console.log(voices);

但注意：有些瀏覽器加載語音列表是異步的，建議監聽onvoiceschanged事件後再獲取。

四、實際應用中的小技巧

• 語音識別不能一直開著？
  是的，長時間運行可能會自動停止，特別是在移動端。可以考慮在onend事件裡重新調用start()來保持監聽狀態。

• 語音識別有延遲怎麼辦？
  盡量在用戶明確意圖後再啟動識別，不要頻繁調用start/stop，減少瀏覽器負擔。

• 語音合成不發音？
  檢查瀏覽器是否靜音、是否有權限，以及是否設置了正確的語言和語音源。

• 不同瀏覽器表現不一致？
  當前Web Speech API 還不算完全標準化，建議做特徵檢測，並給出降級方案或提示。

基本上就這些內容。用好Web Speech API 能讓你的H5 頁面更有交互感，雖然不是特別複雜，但有些細節容易忽略，尤其是跨平台兼容方面。

以上是H5網絡語音API：語音識別和綜合的詳細內容。更多資訊請關注PHP中文網其他相關文章！