Web Speech API 概述

Web Speech API 允許開發者將語音數據集成到 Web 應用程序中。該 API 提供了兩個主要接口：

• SpeechRecognition：用于將語音轉換為文本。
• SpeechSynthesis：用于將文本轉換為語音。

本文將重點探討 SpeechRecognition 接口的實現。

實現語音識別

在開始之前，我們需要檢查用戶的瀏覽器是否支持 Web Speech API，并創建一個新的 SpeechRecognition 實例：

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

如果瀏覽器支持 SpeechRecognition 接口，可以通過 window 對象訪問。如果瀏覽器仍使用 webkit 前綴，則可以使用 window.webkitSpeechRecognition 作為回退方案。

配置語音識別實例

SpeechRecognition 對象提供了多種屬性可供配置：

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

• continuous：設置為 true 時，即使用戶暫停說話，語音識別服務也會持續監聽。
• interimResults：設置為 true 時，服務會返回臨時（非最終）的識別結果。
• lang：指定語音識別的語言（使用語言代碼，例如 "en-US"）。

捕獲語音識別結果

Web Speech API 是基于事件驅動的。當語音識別服務返回結果時，會觸發 onresult 事件。以下是捕獲結果的示例代碼：

recognition.onresult = function(event) {
  const current = event.resultIndex;
  const transcript = event.results[current][0].transcript;
  console.log(transcript);
};

event.results 是一個數組，包含已識別的短語。transcript 屬性存儲了轉錄的文本。

處理錯誤和不匹配事件

為了提升用戶體驗，我們需要處理錯誤事件以及無法匹配語音輸入的情況：

recognition.onerror = function(event) {
  console.error('識別錯誤：' + event.error);
};

recognition.onnomatch = function() {
  console.log('未能匹配語音輸入');
};

啟動和停止語音識別

通過調用 start() 和 stop() 方法，可以控制語音識別服務的啟動和停止：

recognition.start();
// 停止識別
recognition.stop();

建議為用戶提供顯式的停止識別選項，例如按鈕或特定的語音命令。

使用 Web Speech API 實現文本到語音

除了語音識別，Web Speech API 還支持文本到語音轉換功能。通過 SpeechSynthesis 接口，我們可以將文本轉換為語音輸出。

以下是一個簡單的示例：

if ('speechSynthesis' in window) {
  let speech = new SpeechSynthesisUtterance();
  speech.text = '你好，這是一個語音合成的例子。';
  speech.lang = 'en-US';
  speech.volume = 1;
  speech.pitch = 1;
  speech.rate = 1;
  window.speechSynthesis.speak(speech);
} else {
  console.log('您的瀏覽器不支持語音合成');
}

在這段代碼中，我們首先檢查瀏覽器是否支持語音合成功能。如果支持，則創建一個 SpeechSynthesisUtterance 實例，并設置其屬性。最后，通過調用 speechSynthesis.speak() 方法，瀏覽器會將文本轉換為語音輸出。

利用 AI 實現動態語音合成

將 AI 技術與 SpeechSynthesis 接口結合，可以實現更智能和動態的語音合成。例如，利用 GPT-3 等 AI 模型，可以根據輸入或上下文生成類人文本，并將其轉換為語音。

示例：動態生成語音內容

假設我們有一個 API 路由 /generate-text，可以接收帶有 [prompt](https://prompts.explinks.com/) 的 POST 請求，并返回生成的文本。以下是實現示例：

import axios from 'axios';

let prompt = "早上好";
axios.post('/generate-text', { prompt: prompt })
  .then(response => {
    let utterance = new SpeechSynthesisUtterance();
    utterance.text = response.data.generatedText;
    utterance.lang = 'en-US';
    utterance.volume = 1;
    utterance.pitch = 1;
    utterance.rate = 1;
    window.speechSynthesis.speak(utterance);
  })
  .catch(error => {
    console.error(error);
  });

在此代碼中，我們向 /generate-text 路由發送 POST 請求，并將生成的文本用作 SpeechSynthesisUtterance 的內容。這樣可以實現動態、上下文感知的語音合成。

總結

通過本文的介紹，您已經了解了如何使用 JavaScript 和 Web Speech API 在瀏覽器中實現語音識別和文本到語音功能。隨著 AI 技術的不斷發展，這些功能為 Web 應用程序的用戶交互提供了更多可能性。從語音識別到動態語音合成，開發者可以構建更加智能和人性化的應用程序。

原文鏈接: https://justinriggio.com/blog/voice-recognition-browser-web-speech-api-ai/