[JS30] Day20: Native Speech Recognition

這一個挑戰目標是要使用自然語言輸入，不透過套件，但透過瀏覽器內建的物件，會是window.SpeechRecognition或是webkitSpeechRecognition。

SpeechRecognition

JavaScript

google 瀏覽器的會是webkitSpeechRecogntion

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

const recognition = new SpeechRecognition();
recognition.interimResults = true; // 設成true可以即時輸出語音辨識結果，否則是停止講話才輸出

A boolean value representing the state of the current SpeechRecognition's interim results. true means interim results are returned, and false means they aren't.

接著，將語音辨識結果輸出到.words的 div 元素上。

偵測到語音結果時(result)，會將<p>的textContent設為結果；當語音結果的isFinal屬性為真時，會建立新的<p>，停止這次的語音輸入。最後，在語音輸入結束時(end)，加入監聽器，開始下次的語音辨識

recognition.addEventListener("result", (e) => {
  console.log(e);
  console.log(e.results);
  const transcript = Array.from(e.results)
    .map((reuslt) => result[0])
    .map((result) => result.transcript) // ["Today is a", " great day", "I wanna go hiking."]
    .join(""); // "Today is a great day I wanna go hiking."

  p.textContent = transcript;
  // 替換髒字
  // const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
  //   p.textContent = poopScript;

  if (e.results[0].isFinal) {
    p = document.createElement("p"); // next p tag
    words.appendChild(p);
  }

  if (transcript.includes("get the weather")) {
    console.log("Getting the weather"); // 關鍵字
  }

  console.log(transcript);
});

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

recognition.start();

JavaScript​

JavaScript