2021年6月25日 星期五

HTML5 : BINGO 語音輸入外掛

2021年6月25日 星期五

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

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

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

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

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

HTML5  BINGO 外掛加了 MIC 控制鈕

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

要求使用麥克風的權限

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

已啟用語音辨識

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

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

成功辨識的 [腳踏實地] 

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

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

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

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

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



相關文章




0 意見:

張貼留言

 
© 2009. Design by Pocket