SpeechRecognition:start() 方法

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

Web Speech APIstart() 方法啟動語音識別服務,以監聽傳入的音訊(來自麥克風或音訊軌道),並返回識別結果。

語法

js
start()
start(audioTrack)

引數

audioTrack 可選 實驗性

一個 MediaStreamTrack 例項,用於執行語音識別。如果未指定,服務將嘗試識別使用者麥克風的音訊。

返回值

無(undefined)。

異常

InvalidStateError DOMException

如果指定了 audioTrack 並且以下一個或兩個條件成立,則丟擲異常

  • 軌道的 kind 屬性不是 audio
  • 軌道的 readyState 屬性不是 live

示例

識別來自麥克風的語音

在我們的 語音顏色更換器 示例中,我們使用 SpeechRecognition() 建構函式建立一個新的 SpeechRecognition 物件例項。稍後,我們在一個 <button> 上建立一個 click 事件處理程式,以便在點選該按鈕時,我們啟動語音識別服務並等待使用者的麥克風輸入音訊。

js
const recognition = new SpeechRecognition();

const diagnostic = document.querySelector(".output");
const bg = document.querySelector("html");
const startBtn = document.querySelector("button");

startBtn.onclick = () => {
  recognition.start();
  console.log("Ready to receive a color command.");
};

當成功識別出結果時,會觸發 result 事件。我們透過獲取返回的 results 列表中的第一個 SpeechRecognitionResult 的第一個 SpeechRecognitionAlternativetranscript 來從事件物件中提取所說的顏色。然後,我們將 <html> 元素背景顏色設定為該顏色。

js
recognition.onresult = (event) => {
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}`;
  bg.style.backgroundColor = color;
};

識別來自音訊軌道的語音

此程式碼(摘自我們的 音訊軌道識別演示)展示瞭如何識別音訊軌道的語音。首先,我們建立一個新的 SpeechRecognition 例項並將其 lang 設定為 en-US。然後,我們獲取一個指向 <button> 元素和用於輸出結果及診斷資訊的 <p> 元素的引用。

js
const recognition = new SpeechRecognition();
recognition.lang = "en-US";

const startBtn = document.querySelector("button");
const diagnostic = document.querySelector(".output");

接下來,我們向 <button> 新增一個 click 事件處理程式。當點選該按鈕時,我們使用 Audio() 建構函式建立一個新的 <audio> 元素,並將其載入一個 MP3 檔案。一旦 MP3 準備好播放(由 canplay 事件確定),我們使用 captureStream() 方法將其捕獲為 MediaStream,然後使用 getAudioTracks() 提取其音訊 MediaStreamTrack

然後我們播放音訊(這是識別發生的必需條件),並將 MediaStreamTrack 傳遞給 start() 方法來啟動識別。

js
startBtn.addEventListener("click", () => {
  diagnostic.textContent = "";
  console.log("Loading audio track");
  const audioElement = new Audio("cheese-on-toast.mp3");
  audioElement.addEventListener("canplay", () => {
    const stream = audioElement.captureStream();
    const audioTrack = stream.getAudioTracks()[0];
    audioElement.play();
    recognition.start(audioTrack);
    console.log("Recognition started");
  });
});

為了輸出識別到的音訊,我們監聽 result 事件。當該事件觸發時,我們獲取返回的 results 列表中的第一個 SpeechRecognitionResult 的第一個 SpeechRecognitionAlternativetranscript。我們將識別出的文字輸出到輸出 <p> 元素,並將置信度評分記錄到控制檯。

js
recognition.addEventListener("result", (event) => {
  const speech = event.results[0][0].transcript;
  diagnostic.textContent = `Speech recognized: ${speech}.`;
  console.log(`Confidence: ${event.results[0][0].confidence}`);
});

規範

規範
Web Speech API
# dom-speechrecognition-start

瀏覽器相容性

另見