好友 (「嘰哩呱啦ACE」的格主) 發想了一個看文字或圖片提示後，利用麥克風說出答案，由程式進行語音辨識後，再核對答案的計時活動。前一陣子以瀏覽器語音辨識的功能，幫自己 HTML5 FUN 中的一些遊戲，加上了語音外掛來玩；有了這個基礎，看起來應該是不難再生出新的程式，哈！的確是「看起來」！中間卡了好多關，不過都一一解決了。這個程式就是底下要介紹的 HTML5 Speaking。
功能特色
HTML5 Speaking 進行的方式是：
- 看看提示
- 說說答案
所以玩的時候，必須使用支援語音功能的網頁瀏覽器，並允許開啟麥克風；一般電腦中常見的 Chrome、Edge、Safari ，Android 系統上的 Chrome，或是 iOS 系統上的 Safari，都有支援。
以下是 HTML5 Speaking 的功能特色：
- 可跨平臺使用，只要使用支援語音辨識功能的網頁瀏覽器，開啟網頁即可使用，不需要安裝。
- 可自訂題庫及選單，打造出適性的內容。
- 題目的提示可以使用文字或是圖片。
- 可依語言自行設定語音辨識的語言。
- 可自訂遊戲說明對話框的內容。
- 可利用 TTS 服務，以合成語音念出題目。
- TTS 可以指定多個播放速度，依序循環，每次以不同的速度來播放語音。
- 練習進度可以暫存，之後再載入，繼續完成進度。
- 提供單人模式自學，也可利用雙人模式進行共學活動。
- 可將題庫置於 Blogger 或是其它網站中，建置自己的線上版遊戲。
試玩與下載
HTML5 Speaking 可以在哪裡找到呢？
- 如果要玩 HTML5 Speaking 範例題庫，或是下載打包好的檔案，就打開這個網站：
【 HTML5 FUN 】
✔ https://gsyan888.github.io/html5_fun/
在 HTML5 FUN 網站的選單中，找到有紅色麥克風圖示的 HTML5 Speaking，就可以開始玩範例題庫，甚至將打包好的檔案下載並儲存在自己的電腦中，然後修改成自己的題庫。
HTML5 Speaking 的圖示 - 另一個方式是利用這個語法產生器：
【 HTML5 : Speaking@Blogger 語法產生器 】
✔ https://gsyan888.blogspot.com/2022/09/html5-speaking-blogger-embeded.html
【備註】
最新版的語法產生器為「HTML5 FUN烘焙機」，可支援 HTML5 FUN 的各種遊戲，建議使用這個 :
【打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)】
✔ https://gsyan888.blogspot.com/2023/05/html5-fun-homepage.html
然後按題庫格式，在輸入區填入自訂的題庫，就可以馬上玩；還可以利用它來製作可以置入 Blogger 的語法，直接貼到自己的 Blogger 或網站文章中，發布後就可以在 Blogger 中玩 HTML5 Speaking，並分享網址給別人練習。
 |
| [圖1] HTML5 Speaking 啟始畫面 |
遊戲模式
進入 HTML5 Speaking ，如果有選單，在選了要玩哪一套題庫，並完成題庫檔案下載後，就會進入「模式選擇」的畫面 [圖3] [圖4]。
 |
| [圖2] HTML5 Speaking 題組選單 |
 |
| [圖3] HTML5 Speaking 英語練習的遊戲模式選單 |
如 [圖3] 所示，目前 HTML5 Speaking 提供「單人模式」三個選項，「雙人模式」三個選項，總共有六個選項按鈕。以英文為問題，中文和圖片為提示來說，無論單人或雙人模式都各有：
- 看英文，說英文
- 看英文+中文，說英文
- 看中文，說英文
可以由上而下，依序使用，在第三關「看中文，說英文」時，可以說是進行自學成果驗收。
[圖4] 則是注音、國字練習的模式選單，可以由下往上，先純注音、然後國字加注音，最後則是純國字的練習：
 |
| [圖4] HTML5 Speaking 國字+注音的遊戲模式選單 |
Speaking 的練習畫面
選定 HTML5 Speaking 的遊戲模式以後，即可進入類似 [圖5] 的練習畫面：
 |
| [圖5] HTML5 Speaking 的練習畫面 |
底下按照 [圖5] 上的編號來介紹各部的功能：
- 題目的提示區：可以是文字、圖片，或是兩者皆有。
- 麥克風的開關按鈕：按下去後會變色，如果圖示變成紅色，當畫面出現「OK」以後，就可以開始利用麥克風說答案，供語音辨識；反之則是關閉語音辨識。
- 辨識結果區：語音辨識有結果後，會自動進行答案的檢核；藍色的字為正確的，紅色的為錯誤的，灰色則為多餘的字。
- 辨識歷程區：在這裡會顯示語音辨識的歷程，可以用來觀察，並修正自己的發音。
- 合成語音播放鈕：按一下這個按鈕，可以播放答案的合成語音，供練習參考。如果照預設的語速設定(1.0倍、0.75倍、0.5倍)，同一題，每按一下，速度就會變慢一點，到最慢後又由正常速度開始播放語音。
- 跳題按鈕：按一下即可跳過該題，進入下一題練習。
- 工具箱開關：按一下，即可將工具箱打開或是收合。工具箱中有：
- 「說明」：按下去，可以顯示使用說明。
- 「選單」：如果有多組題庫時，可以叫出主選單；不然會出現模式選單。
- 「儲存」：需要將目前的練習進度儲存在本機時使用。
- 「載入」：按這個可以載入之前儲存在本機的舊進度，然後繼續接下去練習。
看完以上的基本介紹，就可以試試 HTML5 Speaking，利用它來練習各種語言了。
HTML5 Speaking 簡介影片
底下是 HTML5 Speaking 系列影片
[之一] 介紹如何玩 HTML5 Speaking :
[之二] 設定檔與題庫格式
[之三] 如何使用語法產生器，並在 Blogger、Weebly 放遊戲
[之四] 如何利用「HTML5:語文高手題庫&國字加注音產生器」製作國字+注音的
其它主題
本篇僅介紹如何玩玩 HTML5 Speaking，之後預計再完成的主題如下：
- HTML5 Speaking 題庫格式與題庫設定檔
- 如何利用 Blogger 來放 HTML5 Speaking 遊戲
- 如何製作 HTML5 Speaking 國字+注音的題庫
相關連結
更新記錄
- 2023.09.26 v.1.X 第二欄位有使用注音，但未按格式加空格者，程式會自動修正 2~4 聲及輕聲；解決烘焙機模式的回選單會發生題庫錯誤的問題。
- 2023.07.10 v.1.V 練習結果加上標題，使用垂直捲軸解決資訊過多時，會看不到部份資料的問題。
- 2023.07.09 v.1.U gameMode 1 or 4 時，如果第一欄跟第二欄都是中文，將第二欄的文字變色以示區別。
- 2023.07.07 v.1.T 修正中文題目中有全形冒號者，會過不關的問題。
- 2023.06.29 答對的題目會在畫面中央顯示一個徽章，方便在使用 [上一題]、[sip 跳題] 按鈕時，識別是否已完成該題，已有徽章的題目，可以按麥克風圖示重做該題，但是一按完麥克風圖示，徽章就會被刪除，所以完全由使用者決定是否要重做。
- 2023.06.28 v.1.S 調整每題時間記錄的方式，原來是記錄 time stamp，現在直接記錄花多少時間；單人模式多一個[上一題]的按鈕，可以回前一題重新練習；麥克風按鈕按完必須等候一秒才能再按，避免連續按造成瀏覽器卡卡的。
- 2023.06.23 v.1.R 三個音效檔合而為一，利用時間起迄來播放指定音效。
- 2023.06.16 v.1.Q 英文 minus Google 辨識為減號(-), 所以得修改讓減號不被去掉。
- 2023.06.09 v.1.P 解決英文雙引號會去去掉的問題。
- 2023.06.07 v.1.O 答案的替換規則檢查流程 bug fix。
- 2022.12.08 v.1.N 讓單位複數也可以容錯。
- 2022.12.05 v.1.M 在主設定檔中加入 replace_rules_list, 設定預設的字詞替換規則，提升辨識率。
- 2022.12.03 v.1.L 雙人模式時，麥克風放中央，改以圖示提示輪到誰；調整雙人模式的版面，辨識結果、跳題鈕、答對的紅勾勾均與玩家頭像圖示同邊；辨識結果如果有百分比的，會變成 nn% ，只好手動修正，英文的變「nn percent」，中文的變成「百分之nn」；修正中文去掉標點符號時，也把英文字母跟數字去掉的錯誤。
- 2022.11.17 v.1.J 比對答案時，會先將中文的標點符號都先移除，讓比對更精準。
- 2022.10.16 v.1.I 語音播放中，按麥克風時，就暫停播放，辨識中要聽語音，則出現警語。
v.1.F 讓所有語言都可以用題庫的第四個欄位來自訂某些字詞的答案核對規則，例如: (她|他|它|牠)，表示句子中的「她」，說出四個的其中一個字，都算對。 - 2022.10.12 v.1.E 觸控裝置可以在語音辨過程記錄區上，以手指上、下滑動，來捲動內容。
v.1.D 修正錯誤記錄不正常的問題。
v.1.C 修正題庫的第4個欄位應用，在遊戲模式二和三時，被當成提示欄位的文字使用的問題。
v.1.B 英文的習庫可以使用第4個欄位，用來定義答案的替換規則，增加答對率。
v.1.A 英文的練習可以在提示區中按單字，可以播放單字的合成語音。 - 2022.10.11 v.1.x 英文問題跟辨識結果中如果有阿拉伯數字，會先轉為英文再比對；錯誤標示的部份，英文會帶入分割單字的符號(非英文與數字者)，這樣可以更精準地標示錯的。
v.1.y 中文問題跟辨識結果中如果有阿拉伯數字，會先轉為中文字；錯誤分析前亦先數字轉中文(英文的是先分割單字才轉)，提高標示的準確率。英文在標示分析前的單字分割，將單引號列入字母，以利「縮寫」的解析。 - 2022.10.08 v.1.w 參考Stackoverflow討論串的範例，加入數字轉英文的功能，解決 Google 語音辨識會將數字變成非英字的問題。
- 2022.10.06 v.1.v 修正成績報中「待加強」清單未正確登錄的問題(因為在出題的程序中，誤重設了判對前一題對錯的旗標變數)。
v.1.u 參考Stackoverflow 討論串的範例，改進了辨識結果錯誤之處的標示，可以較精準標出正確(藍色)、錯誤(紅色)、多的字(刪除線)，和少的字(添加相對應的問號，這部份在使用者亂說時會出錯，待強化演算法)。 - 2022.10.05 v.1.t 解決有時會在答對時，無故跳題的問題。
v.1.s 可用 pinyinConvertEnable 的參數，控制是否在使用中文(zh-TW)時，先將中文轉為無調號的拼音符號，再行核對答案。
v.1.r 修正語音辨識的程序，等候太久(預設為1.5秒，可用 timeRecognitionTimeout 來設定)沒收到聲音，就自動停止辨識(主要會應用在 iOS 中)；前幾版檢查錯誤未執行的 bug 修正。
v.1.q 國字加注用多次的 blur 來製造白色外框字，改採用 CSS 設定，新增一個 id 為 「outlineStyle」 的 style 物件，裡面設定了 class 「txtOutline」 的「text-shadow」，所以國字+注音中的文字框都加了 txtOutline 的 class (「game.Chinese」中)。 - 2022.10.04 v.1.p 應用 Flash 版圖片隨器中使用的技巧，國字注音字體顏色採黑色，加往上、下、左、右四個方向位移 1px 的白邊。
v.1.o 修正注音的調號是否有載入注音字型的判斷式有誤修正；將加注音字的顏色改為黑字白色陰影。
v.1.n 國字加注音支援多行、微調行距及字型大小、純注音者間距縮小、注音字型加粗。 - 2022.10.03 v.1.m 試著由 speaking_set.js 中載入注音字型檔，成功的話，就應用在加注音中；調整注音上下的間距，行高調為85%。
v.1.l 修正未加圖片時，注音字設成了白色，以致看不到內容；加注音的程式未正確判斷出 iOS ，注音放大的程序未執行解決。
v.1.k 修正國字注音的外框未正常作用。
v.1.j 題庫支援國字注音(參考範例五 questions-set-4.js)，題庫設定第一欄放純國字，第二欄放純注意，可以利用教育部字典查國字的注音，每個字的注音間應該要有空格。 - 2022.10.02 v.1.i 按了工具箱中的[選單][儲存][載入]鈕時，先試著將麥克風關閉；所有的語言都採用只要問題的字串包含在辨識結果的字串中，就算通過。
- 2022.10.01 v1.i 在題庫設定檔中，可以用 ttsPlaybackRate 來設定播放語音的速度；Check / Next 按鈕改為 Skip 鈕，微調按鈕的位置；新增第四個題庫範例(日文 glglace 提供)。
v.1.h 按上方的標題看板，可以播放問題的 TTS 語音；中文、日文只要辨識結果中，帶有問題的文字，就當成功，並回傳問題的內容。 - 2022.09.30 v.1.g 因為 iOS 在進行語音辨識時，如果有播放音效，接收聲音會慢1~3秒，所以用倒數的動畫，導引使用者開始說話的時間點。
- 2022.09.29 語音辨識出正確答案，就給個紅色大勾勾並加上 ding dong 的音效，並自動執行 checkAnswer ，不用按 Check 鈕；如果遇到辨識已執行完 abort ，卻仍有結果傳出(iOS)，就先 start 後 stop 。；提示的部份，改成只要題庫有圖片，六種遊戲模式都顯示該圖；按 Check 鈕的次數統計取消。
- 2022.09.28 語法產生器在 iOS 時，會有按了試玩鈕，畫面不正常顯示及有按鈕無法按的情形，修改 html5_fun_embeded.js 中的流程，在建立遊戲用的區塊前(injection)，先讓畫面捲到頂執行「window.scrollTo(0,0);」；微調字型大小的 game.Util.tuneFontSize 在 multiline 時會檢查 \n 換行，讓字大小可以調整得更精準。
- 2022.09.27 支援雙人模式及增加[看英+中說英文]的模式，共有六個模式按鈕可選；調整練習歷程記錄內容，包括每題出題時間(可計算花費時間)、對錯、按多少次Check，同步修改進度儲存與載入的程序。
- 2022.09.26 支援直拿版面，調整各區塊的位罝。
- 2022.09.25 增加 order_by_random 的參數，供自訂出題時是否使用亂數；；進度可以利用工具列儲存及載入；語法產生單輸入的自訂題庫，因為程式載入後會被覆蓋掉設定，所以 Embeded 時，程式找到 settingJS 時，會將它 reload；處理語音辨識的 onerror，讓它顯示 not-allow service-not-allow 相關的錯誤訊息。
- 2022.09.24 加入題庫選單、模式選單；去掉符號及空白比對完全正確的話，直接輸入正解；利用語法產生器，可以製作遊戲放 blogger 的 HTML 語法。；提示支援圖片；iOS 播放音效時，麥克風會延遲，所以在 iOS 禁用音效。
- 2022.09.23 加入回饋音效；調整對答案時，英文先去掉字母跟數字以外的，可以更有效率的對答。
- 2022.09.22 主架構完成。
- 2022.09.17 Speaking 專案建立，測試在 LimeJS 中使用 Web Speech API 的語音辨識。
- 2022.09.15 暫以單字高手加語音外掛測試。
- 2022.09.14 glglace 發想。
發表文章
沒有留言:
張貼留言