HTML5 : Poke 戳戳樂 : 語音外掛

2021年6月為了讓學生在遠距課時，仍然可以享受到自己戳「戳戳樂」的樂趣，所以寫了「雄: HTML5 : remoteClick 網路遙控器」，它算是一個 HTML5 戳戳樂的「外掛」，對戳戳樂的程式來說，不過是知道有人按了按鈕，其它的動作，仍然維持原來的程序在運作。

使用「remoteClick」有個小缺點，如果學生使用的是平板或是手機，要操作遙控器，就必須切換到「remoteClick」，這樣就看不到遠端戳戳樂的畫面。剛好最近在研究 HTML5 FUN 中，有哪些程式可以使用「雄 : HTML5 FUN : 語音輸入外掛」，就針對戳戳樂，調整了語音外掛的一些程序及優化。

[圖1] 有語音外掛的戳戳樂

HTML5 FUN 的語音外掛應用在戳戳樂的流程大概是這樣子：

• 進入戳戳樂，並顯示所有格子左上角的編號。[圖2]
• 主控者按下畫面左下角的藍色「MIC」按鈕，讓它變成啟用監聽狀態的紅色按鈕。[圖 3]
• 輪到戳洞者，以麥克風說出要戳的格子編號，例如：「9號」或是「number nine go」。[圖4]
• 程式以語音辨識，取得編號，如果格子存在，就幫忙觸發按格子的動作。[圖5]

[圖2] 按下藍色MIC按鈕啟動語音辨識

[圖3] MIC 按鈕變紅色、左上角編號由1開始

[圖4] 喊「9號」就可以戳9號那格

[圖5] 9號那格被按下了

這樣的運作方式，如果是線上課程，主控端(老師)只要能讓電腦的麥克風，能收到學生的聲音，即可進行語音辨識，讓遠端學生也能用自己的聲音下指令「遙控」戳戳樂。

操作影片

底下是使用麥克風玩戳戳樂的一小段影片：

啟動語音外掛

要啟動戳戳樂的語音外掛，只要開啟有載入 HTML5 FUN 語音外掛的網頁即可，如果要直接使用 HTML5 FUN 網站中的，可以視指令的語言需求，按底下其中一個網址：

• 使用中文語音指令：
  https://gsyan888.github.io/html5_fun/html5_poke/html5_poke_speech.html
  
  
• 使用英文語音指令：
  https://gsyan888.github.io/html5_fun/html5_poke/html5_poke_speech.html?lang=en-US

如果下載了最新的 HTML5 戳戳樂 .zip 壓縮檔，解壓縮以後，在 html5_poke 的資料夾中，找到這個網頁檔案：

html5_poke_speech.html

[圖6] 由「html5_poke_speech.html」載入戳戳樂語音外掛

用 Chrome 、Edge 或是其它有支援語音辨識功能瀏覽器來開啟 html5_poke_speech.html ，即可自動載入 HTML5 FUN 的語音外掛。

語音指令

使用 HTML5 戳戳樂的語音外掛時，它可以處理哪些語音辨識結果呢？

應用在等候戳格子的畫面時，可以使用中文，或是英文語音指令：

• XX 號
• number XX go

XX 為格子左上角的編號，偵測到，外掛會幫忙「按」指定的格子。

[圖7] 內容對話框也可以使用語音關閉

如果是戳完格子，畫面是停在呈現內容的對話框時 [圖7]，可以使用底下的語音指令：

• 繼續
• 下一個
• 關閉
• 芝麻關門
• 抽下一個
• OK
• next one

當程式偵測到以上的語音指令，它會幫忙「按 Enter 鍵」，等同於按下對話框的「確定」鈕，可以關閉對話框，等待戳下一個格子。

格子的編號

戳戳樂原始的設計，格子的編號是由最左上角那格的 0 號開始，依序加一，因為英文的 zero 在這裡的應用，不太容易辨識成功，所以操作時，建議以下的程序：

• 在戳戳樂的格子出現後，才按下藍色的 MIC 按鈕。

[圖8] 出現格子後再按 MIC 鈕

這樣的好處是：

• 外掛會將戳戳樂的格子改由 1 號開始，依序加一。
• 外掛會自動將格子編號改為顯示編號。

Q & A

• Q : 如何提高英文指令的辨識率？
  A :
  由於 HTML5 FUN 的語音外掛預設是使用中文 (zh-TW) 來當語音辨識的標的，如果想全部使用英文的語音指令，可以在瀏覽器的網址中，加上「?lang=en-US」，讓它以英文當語音辨識的標的。例如：
  
  https://gsyan888.github.io/html5_fun/html5_poke/html5_poke_speech.html
  
  就改為英文辨識的
  
  https://gsyan888.github.io/html5_fun/html5_poke/html5_poke_speech.html?lang=en-US
  
  
• 其它 Q & A 例如:
  為什麼 MIC 鈕自己變藍色了？
  一直沒有出現辨識結果？
  遠距課時，如何收到學生的聲音？
  
  可以參考「雄 : HTML5 FUN : 語音輸入外掛」文末的 Q & A 。

相關文章

• 雄 : HTML5 FUN : 語音輸入外掛
• 雄 : HTML5 : Poke 戳戳樂
• 雄: HTML5 : remoteClick 網路遙控器

更新記錄

• 2022.06.16 按下 MIC 鈕時，自動更改格子的編號、title 及顯示。
• 2022.06.15 加入以網址參數 lang ，可指定要辨識的語言；可自動將英文轉為阿拉伯數字，其中 to / two、for / four 、go / 購 ......容易混淆的，特別修正。
• 2022.06.15 新增戳戳樂語音外掛。