最近工作上有實作到語音辨識輸入這功能,不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。 

瀏覽器支援度

可以用 Can I use 這個網站看看瀏覽器的支援度,恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。

判斷是否有支援語音辨識可以用以下程式碼

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition
      if(!window.SpeechRecognition){
        return
      }
const recognition = new SpeechRecognition()

如果你直接 new SpeechRecognition() 就會 Uncaught ReferenceError: SpeechRecognition is not defined

事件觸發順序

礙於文件上的翻譯不完全,就字面上也不太清楚何時會觸發所幸自己直接全部都盤過一遍。

語音辨識正確的事件順序

  • onstart
  • onaudiostart
  • onsoundstart
  • onspeechstart
  • onspeechend
  • onsoundend
  • onaudioend
  • onresult
  • onend

語音辨識有錯誤的事件順序

  • onerror
  • onend

參考連結

Demo: JavaScript Speech Recognition

Using the Web Speech API

Facebook 功能:

Summary
JavaScript 使用 Web Speech Recognition 語音辨識
Article Name
JavaScript 使用 Web Speech Recognition 語音辨識
Description
最近工作上有實作到語音辨識輸入這功能,不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。
Author
Publisher Name
bonze