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

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

一、什麼是Web Speech API？

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

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

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

二、如何實(shí)現(xiàn)語音識別？

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

要開始識別語音，首先需要創(chuàng)建一個SpeechRecognition實(shí)例：

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

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

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

接著就是啟動識別：

 recognition.start();

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

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

幾點(diǎn)注意事項(xiàng)：

• 需要用戶主動觸發(fā)識別行為（如點(diǎn)擊按鈕），否則可能被瀏覽器阻止。
• 多次調(diào)用start()前最好先調(diào)用abort()或stop() ，避免出錯。
• 在移動端測試更準(zhǔn)確，因?yàn)辂溈孙L(fēng)質(zhì)量通常更好。

三、如何實(shí)現(xiàn)語音合成？

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

首先創(chuàng)建一個SpeechSynthesisUtterance對象：

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

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

 window.speechSynthesis.speak(msg);

常見操作包括：

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

你還可以獲取系統(tǒng)支持的語音列表：

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

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

四、實(shí)際應(yīng)用中的小技巧

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

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

• 語音合成不發(fā)音？
  檢查瀏覽器是否靜音、是否有權(quán)限，以及是否設(shè)置了正確的語言和語音源。

• 不同瀏覽器表現(xiàn)不一致？
  當(dāng)前Web Speech API 還不算完全標(biāo)準(zhǔn)化，建議做特徵檢測，並給出降級方案或提示。

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

以上是H5網(wǎng)絡(luò)語音API：語音識別和綜合的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！