JS30 Day 20 筆記

功能

用內建在 Chrome 瀏覽器裡面的SpeechRecognition API 做語音辨識

step 1 : 建立 SpeachRecognition

根據不同瀏覽器，指定 SpeachRecognition

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

建立語音辨識的接口

const recognition = new SpeechRecognition();

説話的當下即辨識，不用等到説完一段話再辨識（預設為false)

recognition.interimResults = true;
recognition.lang="zh-TW" // 辨識的語言

step 2 : 建立輸出的區域

建立 p 段落的文字區

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

step 3 : 監聽識別系統

recognition.addEventListener('result', e => {
  // 將 result 轉成 array
  const transcript = Array.from(e.results)
    // 用 map 取得回傳陣列中的第 1 筆
    .map(result => result[0])
    // 拿到第 1 筆中的 transcript
    .map(result => result.transcript)
    // 最後用 join 把連結符號消掉，把所有結果連起來
    .join('')

  // 回傳內容放入 p 元素中
  p.textContent = transcript;
  // 黨語音停頓時，就重新開一個段落等待輸入
  if (e.results[0].isFinal) {
    p = document.createElement('p');
    words.appendChild(p);
  }
})

// 如果監聽到語音識別結束，開啟一次新的識別
recognition.addEventListener('end', recognition.start);

// 開始識別
recognition.start();

參考資料：