「JavaScript 30」學習筆記（二十）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

使用瀏覽器的語音辨識功能，把語音辨識的文字顯示出來。

筆記

首先使用 gum 套件建立一個本機伺服器。

npm install
npm start

---

驅動 SpeechRecognition 介面。

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

建立一個 SpeechRecognition 物件。

const recognition = new SpeechRecognition();

控制臨時結果是否回傳。

recognition.interimResults = true;

添加段落元素到文字框內。

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

---

監聽 SpeechRecognition 物件，獲取語音辨識的文字。

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
        .map(result => result[0])
        .map(result => result.transcript)
        .join();

    p.textContent = transcript;
    // 判斷是否建立新的段落
    if (e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
    }
});

---

設定停止之後仍然重新啟動。

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

啟動。

recognition.start();