[JS作品]JS30系列20-Speech Detection

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

 

作品網址：

Demo作品連結
JavaScript 30 作品目錄

處理步驟

步驟 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

Tags:

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言