課程目的:

這次的內容是利用SpeechRecognition API去透過麥克風輸入語音辨識，將辨識後的字打在網頁的筆記上
作品實做

本次功能實作重點：

• 初始化設定以使用語音辨識
• 操作DOM元素
• 監聽語音輸入並輸出到網頁上邏輯

初始化設定以使用語音辨識

 window.SpeechRecognition =
        window.SpeechRecognition || window.webkitSpeechRecognition;

      const recognition = new SpeechRecognition();
      recognition.interimResults = true; //即時輸出辨識的內容
      recognition.lang = "zh-TW"; //設定偵測語言

操作DOM元素

      let p = document.createElement("p");
      const words = document.querySelector(".words");
      words.appendChild(p);

監聽語音輸入並輸出到網頁上邏輯

      recognition.addEventListener("result", (e) => {
        const transcript = Array.from(e.results)
          .map((result) => result[0]) //obj[0]為偵測內容
          .map((result) => result.transcript) //obj[0]的屬性transcript
          .join("");
        console.log(transcript);
        const poopScript = transcript.replace(/熊貓|貓熊|花花/gi, "🐼");

        p.textContent = poopScript; //設定p元素內容
        if (e.results[0].isFinal) {
          p = document.createElement("p");
          words.appendChild(p);
        }
      });

      recognition.addEventListener("end", recognition.start);//當語音辨識結識後再次執行語音辨識接取下一段內容

      recognition.start();//網頁開啟時執行

transcript 屬性為我們偵測到的文字內容

poopScript 我設定了關鍵詞，假設transcript 內容符合熊貓|貓熊|花花其一，則會將該字符轉為🐼

if (e.results[0].isFinal) 這段扣是在說， 偵測到當上一段語音結束之後會再次創建新的空白p元素接取語音內容，以形成不同的段落，達到分段顯示的效果。

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 20：Speech Detection
JS30