Native Speech Recognition


Posted by wayne201299 on 2023-10-03

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);
    

總結

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


#javascript







Related Posts

AI輔導室|製作圓形漢字印鑑效果

AI輔導室|製作圓形漢字印鑑效果

[進階 js 04] Scope 變數的生存範圍

[進階 js 04] Scope 變數的生存範圍

PS學務處|一個功能畫出各種樹

PS學務處|一個功能畫出各種樹


Comments