HTML5 : BINGO 語音輸入外掛

查了一下，可以自訂題庫的 HTML5 BINGO 遊戲上次更新是 2018年2月。最近在研究怎麼樣駭進自己的遊戲，幫它們加上外掛，而 HTML5 BINGO 是想玩一下，讓玩家透過麥克風，用說的方式(語音)來輸入答案。

現在語音辨識的技術已經不錯了，查了一下，Chrome 瀏覽器有內建 Web Speech API，利用這個 API，在瀏覽器取得麥克風的使用權限後，可以將收到的聲音進行語音辨識：

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

於是我寫了一小段程式幫 HTML5 BINGO 做以下的事：

• 加一個 [MIC] 的按鈕，啟用或停止語音辨識。
• 以語音辨識的結果去比對 BINGO 格子中的選項，找到第一個符合的，就幫忙觸發按滑鼠的事件，模擬按下該格子的動作。
• 不過，如果語音辨識的結果是「芝麻開門」或是「芝麻關門」，外掛會去按在 HTML5 BINGO 畫面中右側的「問題」按鈕，可以進入或退出查詢提示的模式。

哈！是的，就只有這樣而已，剩下的都是 HTML5 BINGO 自己程序了。

HTML5  BINGO 外掛加了 MIC 控制鈕

如果有加入語音辨識外掛，在 HTML5 BINGO 的左下角會看到「藍色」的 [MIC] 按鈕，按下去以後，如果瀏覽器有支援語音辨識的 API ，就會出現要求使用麥克風權限的訊息。想要使用語音辨識的功能，當然是要選「允許」。

要求使用麥克風的權限

按了「允許」使用麥克風以後，[MIC] 的按鈕會變成「粉紅色」的。

已啟用語音辨識

識音辨識啟用以後，麥克風收到的聲音會被當語音辨識，所以建議是在選完遊戲的題目，開始計時後再按 [MIC] 啟用。

接著就像沒有外掛時玩 BINGO 遊戲，最大的差別只是除了用按選項答題以外，多了一個「說答案」的選擇。

成功辨識的 [腳踏實地] 

HTML5 BINGO 進行當中，如果題庫有提供「提示」，只要按下「問號」的圖示，即可進入「提示模示」，計時器會暫停，而按下選項的格子會出現該選項的提示，以成語的範例題庫來說，按下語詞的按鈕，會出現該詞的解釋。

喊「芝麻開門」進入提示模式

怎麼樣利用語音來按「問號鈕」進入「提示模式」呢？

想要暫停遊戲看「提示」，就大喊一聲「芝麻開門」，外掛就會幫你按「問號」的圖示。再喊一聲「芝麻關門」，它就可以幫你重新回到遊戲的答題模式。

底下錄了一小段如果用語音辨在 HTML5 BINGO 遊戲中答題的影片供參考：

相關文章

• 雄 : HTML5 : BINGO
• 雄 : HTML5 FUN : 語音輸入外掛