Native Speech Recognition

DEMO

瀏覽器的語音識別功能

實作

1. 同上篇，不能在local瀏覽器跑，需要先上到server上執行，

2. 透過Web API window.SpeechRecognition取得語音識別物件

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

3. 監聽辨識結果

    recognition.addEventListener("result", (e) => {
        console.log(e.result);
        const transcript = Array.from(e.results)
            .map((result) => result[0])
            .map((result) => result.transcript)
            .join("");
        p.textContent = transcript;
        if (e.result[0].isFinal) {
            p = document.createElement("p");
            words.appendChild(p);
        }
   
        if (transcript.includes("stop")) {
            recognition.stop();
        }
    });
   

4. 在瀏覽器辨識結束後也要繼續監聽，並把結果累加到目前的文檔上

    recognition.addEventListener("end", recognition.start);
   

總結

理解瀏覽器的語音辨識功能操作