在現代網際網路的發展中，語音技術正逐漸成為改變使用者體驗的重要一環。Web Speech API 的引入使得開發者能夠在瀏覽器中輕鬆實現語音識別和語音合成功能，為使用者帶來更加直觀和便捷的操作體驗。本文將介紹 Web Speech API 的基本概念、功能特性以及如何利用它來構建創新的應用程式。
什麼是 Web Speech API？
Web Speech API 是一組瀏覽器 API，允許開發者在 Web 應用程式中整合語音識別和語音合成功能。這些 API 的引入標誌着瀏覽器開始支援本地端的語音互動能力，不僅改善了使用者體驗，還為開發者提供了更多創新的可能性。
主要組成部分
Web Speech API 包括兩個核心部分：
SpeechRecognition（語音識別） ：
允許使用者透過麥克風輸入語音，然後將其轉換為文字。
可以檢測語音的開始和結束，以便進行適當的處理和響應。
提供了各種配置選項，如語言識別設定、連續識別等，以滿足不同應用場景的需求。
SpeechSynthesis（語音合成） ：
允許開發者將文字轉換為語音輸出。
支援多種語音合成引擎和語音效果，可以根據需求選擇合適的語音風格和語言。
提供了控制音調、語速等引數的介面，以實現個性化的語音輸出效果。
優勢
多語言支援: Web Speech API 支援多種語言，可0以透過設定
recognition.lang或utterance.lang來切換不同的語言環境。例如，識別法語、西班牙語等。語音指令的識別: 不僅僅是簡單的文字轉換，可以實現對特定命令或短語的識別，如控制網頁的導航、播放媒體等。這需要在識別的事件處理程式中進行語音指令的解析和響應。
連續語音識別: 設定
recognition.continuous = true，使得語音識別能夠持續監聽使用者的語音輸入，而不是單次識別。實時反饋和動態調整: 根據識別的實時結果，可以實現實時反饋或動態調整應用程式的行為。例如，在使用者說話時動態更新介面或提供即時建議。
如何使用 Web Speech API？
實現語音識別
屬性
recognition.grammars 用於儲存一組語法規則，可以透過
addFromString方法新增語法規則。recognition.lang 設定或獲取語音識別的語言
recognition.interimResults 如果設定為
true，則在識別過程中會提供臨時結果。如果為false，則只提供最終結果recognition.maxAlternatives 設定語音識別返回的替代結果的最大數量。預設值為 1，表示只返回最可能的結果
recognition.continuous 如果設定為
true，則識別會持續執行直到顯式停止。如果為false，識別會在單次語音輸入後自動停止recognition.onresult 當識別結果可用時觸發的事件處理程式。事件物件的
results屬性包含識別結果recognition.onaudiostart 當開始錄製音訊時觸發的事件處理程式
recognition.onsoundstart 當檢測到聲音時觸發的事件處理程式
recognition.onspeechstart 當檢測到使用者開始說話時觸發的事件處理程式
recognition.onspeechend 當用戶停止說話時觸發的事件處理程式
recognition.onaudioend 當音訊錄製停止時觸發的事件處理程式
recognition.onend 當語音識別結束時觸發的事件處理程式
recognition.onerror 當語音識別發生錯誤時觸發的事件處理程式。事件物件的
error屬性包含錯誤資訊recognition.onnomatch 當語音識別沒有匹配到任何結果時觸發的事件處理程式
recognition.onsoundend 當檢測到的聲音停止時觸發的事件處理程式
事件
start() 啟動語音識別
stop() 停止語音識別
abort() 終止語音識別，並且不會觸發
onend事件
透過以下簡單的 JavaScript 程式碼片段，可以實現基本的語音識別功能：
const recognition = new webkitSpeechRecognition(); // 建立語音識別物件
recognition.lang = 'en-US'; // 設定識別語言為英語
recognition.onresult = function(event) {
const transcript = event.results[0][0].transcript; // 獲取識別結果文字
console.log('識別結果:', transcript);
};
recognition.start(); // 開始識別
實現語音合成
屬性
SpeechSynthesisUtterance.lang 獲取並設定說話的語言
SpeechSynthesisUtterance.pitch 獲取並設定說話的音調（值越大越尖銳，越小越低沉）
SpeechSynthesisUtterance.rate 獲取並設定說話的速度（值越大越快）
SpeechSynthesisUtterance.text 獲取並設定說話的文字
SpeechSynthesisUtterance.voice 獲取並設定說話時的聲音
SpeechSynthesisUtterance.volume 獲取並設定說話的音量
事件
speak() 將對應的例項新增到語音佇列中
cancel() 刪除佇列中所有的語音，如果正在播放，則直接停止
pause() 暫停語音
resume() 恢復暫停的語音
getVoices 獲取支援的語言陣列
使用 SpeechSynthesis API 實現文字轉語音的功能，示例程式碼如下：
const utterance = new SpeechSynthesisUtterance('Hello, welcome to our website.');
utterance.lang = 'en-US'; // 設定語音合成的語言
window.speechSynthesis.speak(utterance); // 開始語音合成
SpeechGrammar
1. 什麼是 SpeechGrammar？
SpeechGrammar 物件用於指定一個語法規則，這些規則可以幫助語音識別引擎識別特定的語音輸入。它常與 SpeechRecognition 物件結合使用。語法規則可以是簡單的文字，也可以是複雜的正規表示式或者語法定義。
2. 如何使用 SpeechGrammar？
要使用 SpeechGrammar，你需要建立一個 SpeechRecognition 物件，併爲其新增一個或多個 SpeechGrammar 物件。以下是一個示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speech Grammar Example</title>
</head>
<body>
<button id="startButton">Start Speech Recognition</button>
<div id="output"></div>
<script>
// 確保瀏覽器支援 SpeechRecognition
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
console.error("SpeechRecognition not supported");
} else {
// 建立 SpeechRecognition 例項
const recognition = new SpeechRecognition();
// 定義語法規則
const grammar = '#JSGF V1.0; grammar colors; public <color> = red | green | blue | yellow ;';
// 建立 webkitSpeechGrammarList 例項
const speechGrammarList = new webkitSpeechGrammarList();
speechGrammarList.addFromString(grammar, 1); // 1 是語法的優先順序
// 將語法列表應用到 SpeechRecognition 例項
recognition.grammars = speechGrammarList;
// 配置識別選項
recognition.lang = 'en-US'; // 設定語言
recognition.interimResults = false; // 只返回最終結果
recognition.maxAlternatives = 1; // 只返回一個替代結果
// 開始識別
recognition.start();
recognition.onresult = (event) => {
const result = event.results[0][0].transcript;
console.log('識別結果:', result);
};
recognition.onerror = (event) => {
console.error('識別錯誤:', event.error);
};
}
</script>
</body>
</html>
透過合理使用 SpeechGrammar 和 SpeechRecognition，你可以建立更精確的語音識別應用，提升使用者體驗。
實際應用場景包括但不限於：
智慧助手和語音搜尋: 實現類似於 Siri、Google Assistant 等智慧助手的語音控制和資訊獲取功能。
無障礙和輔助技術: 支援視覺障礙使用者的語音導航、文字轉語音等輔助功能。
教育和培訓: 提供基於語音的學習和培訓工具，如語音答題、學習筆記轉錄等。
娛樂和遊戲: 實現語音驅動的遊戲操作和互動體驗，如語音控制角色移動、發聲識別等。
總結
Web Speech API 的推出不僅僅是技術進步的體現，更是對網際網路應用程式使用者體驗提升的重大貢獻。透過使用這些功能強大的 API，開發者可以為他們的應用程式新增創新的語音互動功能，從而吸引更多使用者並提升使用者滿意度。無論是構建下一代互動遊戲、個性化的助手應用，還是革新教育和商業應用，Web Speech API 都將為您的創意提供強大的支援。
探索和利用 Web Speech API，讓我們共同打造一個更智慧、更直觀的網際網路世界！
