2025年9月14日中文

探索 Web Speech API，解鎖語音辨識和文字轉語音技術的潛力，為全球 Web 應用程式提供增強的用戶體驗。 (Traditional Chinese)

Web Speech API：語音辨識和文字轉語音實現的綜合指南

Web Speech API 是一個強大的工具，讓 Web 開發人員可以直接將語音辨識和文字轉語音功能整合到他們的 Web 應用程式中。這為全球受眾創造更易於訪問、互動性和使用者友好的體驗開闢了一個廣闊的空間。本綜合指南將探討 Web Speech API 的核心概念、實施細節和實際應用，確保您可以利用其潛力來增強您的專案。

了解 Web Speech API

Web Speech API 包含兩個主要部分：

語音辨識 (語音轉文字)： 使 Web 應用程式能夠從用戶的麥克風捕獲音訊輸入並將其轉錄為文字。
語音合成 (文字轉語音)： 允許 Web 應用程式將文字轉換為口語音訊輸出。

為什麼要使用 Web Speech API？

將語音功能整合到您的 Web 應用程式中具有多個顯著的優勢：

增強的輔助功能： 為殘疾用戶提供替代的輸入/輸出方法，從而提高整體輔助功能。例如，有運動障礙的個人可以使用語音命令導航和與 Web 內容互動。
改善的使用者體驗： 為用戶提供一種免提且更自然的方式來與應用程式互動，尤其是在行動和物聯網 (Internet of Things) 環境中。想像一下，一個用戶在廚房裡做飯，按照平板電腦上的食譜，使用語音控制螢幕可以避免用可能髒污的手接觸設備。
多語言支援： 支援多種語言，使您可以創建滿足全球受眾需求的應用程式。具體的語言支援取決於所使用的瀏覽器和作業系統，但英語、西班牙語、法語、普通話、阿拉伯語、印地語和葡萄牙語等主要語言通常都得到很好的支援。
提高參與度： 創造更具吸引力和互動性的體驗，從而提高用戶滿意度和保留率。
效率和生產力： 透過允許使用者透過語音命令快速輕鬆地執行動作，簡化任務和流程。醫生直接將病人筆記聽寫到電子健康記錄 (EHR) 系統中就是一個很好的例子。

語音辨識實施

讓我們深入研究使用 Web Speech API 進行語音辨識的實際實施。以下程式碼片段將引導您完成該過程。

設定語音辨識

首先，檢查用戶的瀏覽器是否支援 SpeechRecognition API：

            if ('webkitSpeechRecognition' in window) {
 // Speech Recognition API is supported
} else {
 // Speech Recognition API is not supported
 console.log("Speech Recognition API is not supported in this browser.");
}

接下來，創建一個新的 `SpeechRecognition` 物件：

            var recognition = new webkitSpeechRecognition();

注意： `webkitSpeechRecognition` 前綴在 Chrome 和 Safari 中使用。對於其他瀏覽器，您可能需要使用 `SpeechRecognition`（不帶前綴）或檢查瀏覽器的文件。

配置語音辨識

您可以配置 `SpeechRecognition` 物件的各種屬性來自定義其行為：

`lang`：設定語音辨識的語言。例如，`recognition.lang = 'en-US';` 將語言設定為美國英語。其他範例包括西班牙語 (西班牙) 的 `es-ES`、法語 (法國) 的 `fr-FR`、德語 (德國) 的 `de-DE`、日語 (日本) 的 `ja-JP` 和普通話 (中國) 的 `zh-CN`。
`continuous`：指定是執行連續辨識還是在第一次發聲後停止。設定為 `true` 進行連續辨識，設定為 `false` 進行單次發聲。 `recognition.continuous = true;`
`interimResults`：確定是傳回臨時結果還是僅傳回最終結果。臨時結果對於向用戶提供即時回饋非常有用。 `recognition.interimResults = true;`

範例配置：

            recognition.lang = 'en-US';
recognition.continuous = true;
recognition.interimResults = true;

處理語音辨識事件

`SpeechRecognition` 物件會發出多個您可以監聽的事件：

`start`：語音辨識開始時觸發。
`result`：語音辨識產生結果時觸發。
`end`：語音辨識停止時觸發。
`error`：語音辨識期間發生錯誤時觸發。

以下是如何處理 `result` 事件：

            recognition.onresult = function(event) {
 var interim_transcript = '';
 var final_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;
 }
 }

 console.log('Interim transcript: ' + interim_transcript);
 console.log('Final transcript: ' + final_transcript);

 // Update UI with the recognized text
 document.getElementById('interim').innerHTML = interim_transcript;
 document.getElementById('final').innerHTML = final_transcript;
};

以下是如何處理 `error` 事件：

            recognition.onerror = function(event) {
 console.error('Speech recognition error:', event.error);
};

啟動和停止語音辨識

要啟動語音辨識，請呼叫 `start()` 方法：

            recognition.start();

要停止語音辨識，請呼叫 `stop()` 方法：

            recognition.stop();

完整的語音辨識範例

以下是如何實施語音辨識的完整範例：

            <!DOCTYPE html>
<html>
<head>
 <title>Speech Recognition Example</title>
</head>
<body>
 <h1>Speech Recognition</h1>

 <button id="startBtn">Start Recognition</button>
 <button id="stopBtn">Stop Recognition</button>

 <div>
 <b>Interim Result:</b> <span id="interim"></span>
 </div>
 <div>
 <b>Final Result:</b> <span id="final"></span>
 </div>

 <script>
 if ('webkitSpeechRecognition' in window) {
 var recognition = new webkitSpeechRecognition();
 recognition.lang = 'en-US';
 recognition.continuous = true;
 recognition.interimResults = true;

 recognition.onstart = function() {
 console.log('Speech recognition started');
 };

 recognition.onresult = function(event) {
 var interim_transcript = '';
 var final_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;
 }
 }

 document.getElementById('interim').innerHTML = interim_transcript;
 document.getElementById('final').innerHTML = final_transcript;
 };

 recognition.onerror = function(event) {
 console.error('Speech recognition error:', event.error);
 };

 recognition.onend = function() {
 console.log('Speech recognition ended');
 };

 document.getElementById('startBtn').addEventListener('click', function() {
 recognition.start();
 });

 document.getElementById('stopBtn').addEventListener('click', function() {
 recognition.stop();
 });
 } else {
 console.log("Speech Recognition API is not supported in this browser.");
 document.getElementById('startBtn').disabled = true;
 document.getElementById('stopBtn').disabled = true;
 }
 </script>
</body>
</html>

文字轉語音實施

現在，讓我們探索使用 Web Speech API 實施文字轉語音。

設定文字轉語音

首先，檢查 `speechSynthesis` 物件是否可用：

            if ('speechSynthesis' in window) {
 // Speech Synthesis API is supported
} else {
 // Speech Synthesis API is not supported
 console.log("Speech Synthesis API is not supported in this browser.");
}

建立語音合成語句

要合成語音，您需要建立一個 `SpeechSynthesisUtterance` 物件：

            var utterance = new SpeechSynthesisUtterance();

配置語音合成語句

您可以配置 `SpeechSynthesisUtterance` 物件的各種屬性來自定義語音輸出：

`text`：設定要說的文字。 `utterance.text = 'Hello, world!';`
`lang`：設定語音合成的語言。 `utterance.lang = 'en-US';` 與語音辨識類似，可以使用各種語言代碼，例如 `es-ES`、`fr-FR`、`de-DE`、`ja-JP` 和 `zh-CN`。
`voice`：設定用於語音合成的聲音。您可以使用 `window.speechSynthesis.getVoices()` 檢索可用聲音的列表。
`volume`：設定語音輸出的音量（0 到 1）。 `utterance.volume = 0.5;`
`rate`：設定語音速率（0.1 到 10）。 `utterance.rate = 1;`
`pitch`：設定語音的音高（0 到 2）。 `utterance.pitch = 1;`

範例配置：

            utterance.text = 'This is a sample text for speech synthesis.';
utterance.lang = 'en-US';
utterance.volume = 0.8;
utterance.rate = 1.0;
utterance.pitch = 1.0;

設定聲音

要選擇特定的聲音，您需要檢索可用聲音的列表並選擇您要使用的聲音：

            window.speechSynthesis.onvoiceschanged = function() {
 var voices = window.speechSynthesis.getVoices();
 var selectedVoice = null;
 for (var i = 0; i < voices.length; i++) {
 if (voices[i].lang === 'en-US' && voices[i].name.includes('Google')) { // Example: Using Google's English (US) voice
 selectedVoice = voices[i];
 break;
 }
 }

 if (selectedVoice) {
 utterance.voice = selectedVoice;
 } else {
 console.warn('No suitable voice found. Using default voice.');
 }
};

重要： `onvoiceschanged` 事件是必要的，因為頁面載入時聲音列表可能無法立即使用。在檢索聲音之前，等待此事件至關重要。

說出文字

要說出文字，請呼叫 `speechSynthesis` 物件的 `speak()` 方法：

            speechSynthesis.speak(utterance);

處理語音合成事件

`SpeechSynthesisUtterance` 物件會發出多個您可以監聽的事件：

`start`：語音合成開始時觸發。
`end`：語音合成完成時觸發。
`pause`：語音合成暫停時觸發。
`resume`：語音合成恢復時觸發。
`error`：語音合成期間發生錯誤時觸發。

以下是如何處理 `end` 事件：

            utterance.onend = function(event) {
 console.log('Speech synthesis finished.');
};

完整的文字轉語音範例

以下是如何實施文字轉語音的完整範例：

            <!DOCTYPE html>
<html>
<head>
 <title>Text-to-Speech Example</title>
</head>
<body>
 <h1>Text-to-Speech</h1>

 <textarea id="textInput" rows="4" cols="50">Enter text here...</textarea><br>
 <button id="speakBtn">Speak</button>

 <script>
 if ('speechSynthesis' in window) {
 var textInput = document.getElementById('textInput');
 var speakBtn = document.getElementById('speakBtn');

 var utterance = new SpeechSynthesisUtterance();
 utterance.lang = 'en-US';

 window.speechSynthesis.onvoiceschanged = function() {
 var voices = window.speechSynthesis.getVoices();
 var selectedVoice = null;
 for (var i = 0; i < voices.length; i++) {
 if (voices[i].lang === 'en-US' && voices[i].name.includes('Google')) {
 selectedVoice = voices[i];
 break;
 }
 }

 if (selectedVoice) {
 utterance.voice = selectedVoice;
 } else {
 console.warn('No suitable voice found. Using default voice.');
 }
 };

 utterance.onend = function() {
 console.log('Speech synthesis finished.');
 };

 speakBtn.addEventListener('click', function() {
 utterance.text = textInput.value;
 speechSynthesis.speak(utterance);
 });
 } else {
 console.log("Speech Synthesis API is not supported in this browser.");
 document.getElementById('textInput').disabled = true;
 document.getElementById('speakBtn').disabled = true;
 }
 </script>
</body>
</html>

實際應用和用例

Web Speech API 可用於跨不同行業的各種應用：

輔助工具： 為視障用戶建立螢幕閱讀器和輔助技術。
語音控制介面： 為 Web 應用程式和設備開發語音驅動的導航和控制系統。考慮一個智慧家居儀表板，使用者可以使用語音命令控制燈光、電器和安全系統。
語言學習應用程式： 構建互動式語言學習工具，提供發音回饋和練習機會。
聽寫和轉錄服務： 允許使用者直接將文字聽寫到 Web 表單和文件中，從而提高效率和生產力。想像一下，一位在外地採訪的記者透過語音轉文字快速記錄他們的筆記。
客戶服務聊天機器人： 將基於語音的聊天機器人整合到客戶服務平台中，以提供個人化的支援和協助。這對於提供多語言支援特別有用。
遊戲： 在遊戲中實施語音命令，用於角色控制、選單導航和遊戲內通訊。
線上學習： 建立具有語音啟動測驗、發音練習工具和其他引人入勝功能的互動式線上學習模組。

全球實施注意事項

為全球受眾實施 Web Speech API 時，必須考慮以下因素：

語言支援： 確保 API 支援您目標受眾所需的語言。在不同的瀏覽器和作業系統上徹底測試，因為支援可能會有所不同。
口音和方言變體： 請注意語言中的口音和方言變體。語音辨識的準確性可能會受到這些變體的影響。使用包含各種口音的資料訓練系統可以提高效能。
背景噪音： 減少語音辨識期間的背景噪音以提高準確性。為使用者提供在安靜環境中使用 API 的指導。
隱私和安全： 透過安全地處理音訊資料並提供有關如何使用資料的清晰資訊來保護用戶隱私。遵守相關的資料隱私法規，例如歐洲的 GDPR（通用資料保護法規）和美國的 CCPA（加州消費者隱私法案）。
網路連線： 確保語音辨識和文字轉語音功能都有可靠的網路連線。考慮提供離線支援或快取常用的資料，以減輕連線問題。
文化敏感性： 在設計語音介面時，請注意文化差異。避免使用所有使用者可能都不理解的俚語或成語。考慮為使用者提供自定義文字轉語音中使用的聲音和語言的選項。

進階技術和最佳實踐

為了最大限度地提高 Web Speech API 的效能，請考慮以下進階技術和最佳實踐：

自訂詞彙： 對於語音辨識，您可以定義自訂詞彙以提高與您的應用程式相關的特定單字或短語的準確性。
語法定義： 使用語音辨識語法規範 (SRGS) 為語音辨識定義語法，從而進一步提高準確性。
情境意識： 將情境資訊納入您的語音辨識實施中，以提高準確性和相關性。例如，如果使用者正在填寫表單，系統可以預期每個欄位中的特定類型輸入。
使用者回饋： 向使用者提供有關語音辨識和文字轉語音狀態的清晰回饋。使用視覺提示來指示系統何時正在聆聽、處理或說話。
錯誤處理： 實施穩健的錯誤處理以優雅地處理意外錯誤，並向使用者提供資訊豐富的訊息。
效能最佳化： 最佳化您的程式碼以提高效能，以確保流暢且反應靈敏的使用者體驗。最大限度地減少正在處理的資料量，並避免不必要的計算。
測試和評估： 在不同的瀏覽器、設備和語言上徹底測試和評估您的實施，以確保相容性和準確性。收集使用者回饋以找出需要改進的領域。

結論

Web Speech API 提供了一種強大而通用的方式，可將語音辨識和文字轉語音功能整合到 Web 應用程式中。透過理解本指南中概述的核心概念、實施細節和最佳實踐，您可以釋放這項技術的全部潛力，並為全球使用者創造更易於訪問、互動性和引人入勝的體驗。請記住考慮語言支援、口音變化、隱私和文化敏感性等全球因素，以確保您的應用程式具有包容性，並且對不同的受眾有效。隨著 Web Speech API 的不斷發展，隨時了解最新的進展和最佳實踐對於提供創新且具有影響力的語音啟用的 Web 體驗至關重要。