HTML5如何識別語音讀出的內容和朗讀指定的內容？

王铁柱6發表於2024-11-23
HTML

HTML5本身並不直接“識別”語音讀出的內容。語音識別和朗讀是透過不同的API實現的。

1. 語音識別 (Speech Recognition):

HTML5 透過 Web Speech API 的 SpeechRecognition 介面實現語音識別。它將使用者的語音輸入轉換為文字。 瀏覽器將處理語音識別，並將結果返回給你的JavaScript程式碼。

// 檢查瀏覽器是否支援語音識別
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();

  // 開始語音識別
  recognition.start();

  // 獲取識別結果
  recognition.onresult = function(event) {
    const transcript = event.results[0][0].transcript;
    console.log('You said: ', transcript);
    //  在這裡處理識別出來的文字，例如顯示在頁面上或傳送到伺服器
  };

  // 處理錯誤
  recognition.onerror = function(event) {
    console.error('Speech recognition error:', event.error);
  };
} else {
  console.log('Speech recognition not supported.');
}

2. 語音朗讀 (Speech Synthesis):

HTML5 透過 Web Speech API 的 SpeechSynthesis 介面實現語音朗讀。它將文字轉換為語音輸出。

// 獲取語音合成物件
const synth = window.speechSynthesis;

// 建立一個新的語音 utterance
const utterance = new SpeechSynthesisUtterance('Hello, this is a test.');

// 可選：設定語音引數，例如速率、音調和音量
utterance.rate = 1.2;
utterance.pitch = 1.5;
utterance.volume = 0.8;

// 開始朗讀
synth.speak(utterance);

// 可選：監聽朗讀事件，例如 'start', 'end', 'error'
utterance.onend = function(event) {
  console.log('Speech synthesis finished');
};

結合語音識別和朗讀:

你可以將這兩個API結合起來建立互動式語音應用。例如，使用者可以透過語音輸入指令，然後應用將結果朗讀出來。

// ... (語音識別程式碼) ...

recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  console.log('You said: ', transcript);

  // 將識別結果朗讀出來
  const utterance = new SpeechSynthesisUtterance(transcript);
  synth.speak(utterance);
};

// ... (其餘程式碼) ...

關鍵點:

  • 瀏覽器相容性: Web Speech API 在主流瀏覽器中得到廣泛支援，但仍建議檢查相容性。
  • 使用者許可權: 瀏覽器會請求使用者授權使用麥克風進行語音識別。
  • 語言支援: SpeechSynthesis 支援多種語言。可以透過 speechSynthesis.getVoices() 獲取可用的語音列表。
  • 錯誤處理: 務必處理 onerror 事件，以便在出現錯誤時向使用者提供反饋。

希望這個解釋能夠幫助你理解如何在HTML5中使用語音識別和朗讀。

相關文章