SpeechRecognition:start() 方法
Web Speech API 的 start() 方法啟動語音識別服務,以監聽傳入的音訊(來自麥克風或音訊軌道),並返回識別結果。
語法
start()
start(audioTrack)
引數
audioTrack可選 實驗性-
一個
MediaStreamTrack例項,用於執行語音識別。如果未指定,服務將嘗試識別使用者麥克風的音訊。
返回值
無(undefined)。
異常
InvalidStateErrorDOMException-
如果指定了
audioTrack並且以下一個或兩個條件成立,則丟擲異常- 軌道的
kind屬性不是audio。 - 軌道的
readyState屬性不是live。
- 軌道的
示例
識別來自麥克風的語音
在我們的 語音顏色更換器 示例中,我們使用 SpeechRecognition() 建構函式建立一個新的 SpeechRecognition 物件例項。稍後,我們在一個 <button> 上建立一個 click 事件處理程式,以便在點選該按鈕時,我們啟動語音識別服務並等待使用者的麥克風輸入音訊。
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 的第一個 SpeechRecognitionAlternative 的 transcript 來從事件物件中提取所說的顏色。然後,我們將 <html> 元素背景顏色設定為該顏色。
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> 元素的引用。
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() 方法來啟動識別。
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 的第一個 SpeechRecognitionAlternative 的 transcript。我們將識別出的文字輸出到輸出 <p> 元素,並將置信度評分記錄到控制檯。
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 |
瀏覽器相容性
載入中…