HTML5 FUN : 語音輸入外掛

前幾天看到朋友線上課程中，讓學生玩 HTML5 FUN 的「Monster 語詞大挑戰」，突然想到 2021年六月做了一個小實驗，幫 HTML5 Bingo 遊戲寫了一個語音輸入答案的外掛，利用語音辨識，將麥克風的收到的聲音辨識出文字以後，去比對遊戲答案選項鈕上的文字，如果找到一樣的，就觸發按按鈕的相關程序，摸擬人直接用滑鼠或是手指觸碰按鈕的動作。

利用這個外掛，如果上遠距課時，只要麥克風能收到遠端學生的聲音，學生就能直接用說的，來按老師電腦畫面中的遊戲按鈕；這跟老師聽到後，幫忙按答案來比較，能自己用語音控制，應該可以多幾分樂趣。

重新檢視了一下「Monster 語詞大挑戰」，當初設計的按鈕很簡單，觸發的特性與「HTML5 Bingo」類似，所以又把語音輸入答案的外掛拿出來改良，現在 HTML5 FUN 中的「Monster 語詞大挑戰」、「量詞大挑戰」、「Bingo」和「戳戳樂」都可以使用語音輸入答案的外掛。

[圖1] 左下角的「MIC」按鈕為語音輸入外掛

這個語音外掛使用到的技術可以參考底下的文件：

• https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

不過因為不是每一種網頁瀏覽器都支援，所以加了語音輸入外掛的 HTML5 FUN 程式，如果出現 [圖1] 箭頭所標示的藍色「MIC」按鈕，就可以使用語音輸入外掛來「說」答案。

功能特色

HTML5 FUN 的語音外掛是在載入原有的程式以後，再載入語音辨識的相關程式。所以只是將語音辨識結果分析是否為答案選項，符合條件的，就「按」字串相對應的按鈕，其它的，都還是 HTML5 FUN 程式原有的運作方式。所以底下僅就語音辨識的部份說明一下目前的功能特色：

• 即時辨識：目前的設定是使用即時辨識，只要有語音有辨識出結果，程式就立即比對是不是遊戲中的答案選項按鈕。
• 支援同音字：因為是語音辨識，又無法選擇將同音字換掉，所以中文會先轉為拼音(江明勳老師建議)，而且會去除調號，用這樣方法，可以提高比對的成功率。哈！所以可以用「機器人」的聲音玩玩看。
• 支援長句比對：線上課時，老師跟學生可能有指導、交談，同時說話的狀況，所以現在比對的程序，是拿遊戲候選答案按鈕上的文字，在語音辨識的文字字串中搜尋，如果找到符合的，就觸發按鈕。

使用方法

HTML5 FUN 的網站網址如下：

• https://gsyan888.github.io/html5_fun/

目前支援語音外掛的程式如下：

Bingo

捉鬼特攻隊

量語大考驗

Monster 詞語大挑戰

戳戳樂

進入遊戲以後，如果畫面的左下角有出現類似 [圖1] 的藍色「MIC」按鈕，表示可能可以使用麥風來「說」答案。當我們按下藍色按鈕，如果瀏覽器跳出要求使用麥克風的權限，按「允許」後，按鈕就會變成紅色的。

[圖2] 紅色按鈕上方有語音辨識的結果

左下角的「MIC」按鈕變成紅色的，表示它已經開始監聽麥克風的聲音。如果有辨識出結果，就會在紅色按鈕上方出現文字。

[圖3] 語詞的辨識結果

此時，可以請學生講語詞 [圖3] ；或是像 [圖4] ，說出完整的句子：

[圖4] 長句的辨識結果

以 [圖4] 為例，因為答案鈕上的文字「不得了」三個字，在語音辨識結果「為了這點小事傷心得『不得了』太不像話了」有出現，所以外掛就會去觸發該按鈕「按下去」的動作。

Q & A

• Ｑ：為什麼 MIC 鈕自己變藍色了？
  Ａ：
  麥克風如果監聽不到語音，一段時間後，它會自動關閉；紅色的按鈕會變成藍色，想再度使用語音辨識，就必須再按一下左下角的「MIC」鈕。
  
  
• Ｑ：一直沒有出現辨識結果？
  Ａ：
  如果發現左下角的「MIC」鈕是紅色的，而且麥克風也沒問題，但是講話卻沒有出現任何辨識結果，建議按一下「MIC」鈕，變成藍色後，再按一下變紅色，讓它重新啟動語音辨識的程序。
  
  
• Ｑ：遠距課時，如何收到學生的聲音？
  Ａ：
  電腦如果有使用混音器，這部份應該照使用說明，設定好就可以由麥克風收到遠端學生的聲音。
  如果沒有混音器，不使用耳麥，外接喇叭與麥克風，將喇叭的音量調小至麥克風收得到聲音，又不致發生回授的情形即可。

示範影片

底下的測試影片是利用 Google Meet 來進行同步視訊，老師端用桌機，並外接喇叭及麥克風，學生端使用手機接耳麥。學生透過手機收音，經由網路傳送到老師的電腦，老師的麥克風收音後，進行語音辨識，並與 Monster 詞語大挑戰程式互動。

更新記錄

• 2022.06.16 支援打鬼特攻隊。
• 2022.06.15 支援戳戳樂。
• 2022.06.12 將中文轉為拼音，改用 RegExp 來比對按鈕文字是否為語音辨識結果的一部份。檢查瀏覽器是否支援語音辨識的 API；修改語音辨識的參數:
  interimResults=true 改為立即辨識。
  lang='zh-TW' 避免 Edge 以拼音為結果。而不是中文字。
  
• 2022.06.11 針對 HTML5 Monster 修改。
• 2021.06.19 加入 MIC 按鈕，供啟動／關閉語音辨識功能。在畫面上顯示辨識結果。
• 2021.06.18 新增

相關文章

• 雄 : HTML5 : BINGO 語音輸入外掛
• 雄 : HTML5 : Poke 戳戳樂 : 語音外掛