功能
用內建在 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();
參考資料:
- SpeechRecognition @MDN
- JavaScript Speech Recognition #JavaScript30 20/30 @Wes Bos
- [ Alex 宅幹嘛 ] 👨💻 深入淺出 Javascript30 快速導覽 | Day 20:Speech Detection @Alex 宅幹嘛
- 20 - Speech Detection @guahsu
- [JS30] Day20: Native Speech Recognition@PJCHENder
- Google 語音辨識 API@oxxo studio