本次的挑戰任務,是利用瀏覽器內置Web speech API,將自己所說的話輸出在頁面上,僅chrome瀏覽器支持。
說明:由於只有chrome瀏覽器實現了該接口,而語音識別需要將捕捉到的信息發送至google服務器進行處理。

 


作品網址:


https://steven5j.github.io/20-Speech-Detection/


處理步驟


步驟 1.

啟動語音,由於目前只有chrome瀏覽器實現了此功能,故直接使用帶有前綴的構造函數來構建一個語音識別對象。

步驟 2.

產生識別結果後,將文字呈現在 p tag 內容中,識別結果為 SpeechRecognitionResultList 取得 transcript 屬性,就是辨識文字

監聽收到結果事件,將語音識別結果輸出在DOM元素上。

步驟 3.

當辨識文字出現特定文字的時候,可以使用 replace 取代呈現。


特別技術、函式


<HTML>

<CSS>

<JavaScript>

SpeechRecognition()

語音識別,目前還在實驗階段。

SpeechRecognition.interimResults()

此屬性為布林值,控制是否取得即時辨識結果,預設為 false

SpeechRecognition.start()

啟動語音識別服務

SpeechRecognition Events 觸發事件
Web Speech API 事件

SpeechRecognition: result event

語音辨識結束返回結果的時候觸發。

SpeechRecognition: end event

語音辨識服務結束時觸發。

參考資料:


JS30紀錄 20-Speech Detection:https://shunnien.github.io/2018/01/12/Javascript30days-20/

Js 30 day 中文指南:https://github.com/soyaine/JavaScript30

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 20:Speech Detection:https://youtu.be/TUgz-m-EMKg

發佈留言