HTML5 : Listening 聽音辨字六選一

「聽音辨字六選一」是 2010 年底由南投縣永興國小江明勳老師發想的一個 Flash 小工具 (詳情請參考另一篇文章「雄 : Flash : listening2 聽音辨字六選一」中，噗浪發想文的連結)，玩的時候，主要是先聽語音的題目後，在畫面上多張圖片或是文字中選出正確的答案，答對了，就繼續進行下一題。原來是應用在英文，應用在中文也是不錯的工具。

其實 2014年就做出了 HTML5 版的「聽音辨字六選一」，也曾經在 Blogger 中新增了文章，想幫它寫個改版後的介紹，但是起筆後，就這麼一直「草稿」的狀態放著。

這幾天為了讓「聽音辨字六選一」也能嵌入 Blogger 、網頁中使用，將它大調整了一番，順便加強了中文顯示的功能。底下就改版後的「聽音辨字六選一」簡單地介紹一下，有興趣的人，可以搭配後面的「語法產生器」，快速地製作自己的「聽音辨字六選一」遊戲。

[圖1] 2022年版的聽音辨字六選一展示範例

功能簡介

「聽音辨字六選一」進入遊戲以後，會讀入預先製作好題庫設定檔，再依設定，由題庫中選擇指定數量的題目，以其中一道題目為標準答案，再加其它題目為選項；畫面中會呈現圖卡及文字(可自訂要不要顯示)，並播放題目的語音。玩家根據這些提示，點選答案，答對了，就可以加分，並進入下一題。底下是「聽音辨字六選一」的一些特性與功能：

• 以 HTML5 開發，只要支援 HTML5 的網頁瀏覽器(Chrome、Edge、Safari、Firefox ......)即可玩。
• 提供客製化的參數，可以自訂題庫及控制遊戲要顯示的內容，打造自己的遊戲。
• 題目如果沒有圖片時，會自動改以文字卡片的方式呈現。
• 題目如果沒有語音時，會自動改以 TTS 合成語替代。
• 題目支援中文國字旁加直式注音的方式呈現 (可用「雄 : HTML5 注音高手語法產生器」來製作語法)。
• 支援 Blogger、網頁嵌入的方式，只要使用語法產生器製作嵌入語法，即可將遊戲放在網頁中，線上供學生練習。

[圖2] 2022年版聽音辨字六選一支援多元的題庫格式

試玩與下載

「HTML5 聽音辨字六選一」的檔案與範例，都放在 HTML5 FUN 的網站中，如果想試玩範例題庫，或是下載所有檔案來修改，都可以在裡面找到。如果想要快速地製作單一題庫的聽音辨字六選一，則可以考慮使用「語法產生器」製作嵌入網站中的語法，再將遊戲嵌入網站中。

方法一：前往 HTML5 FUN 網站

HTML5 FUN 網站的網址如下：

• 雄 : HTML5 FUN
  https://gsyan888.github.io/html5_fun/

HTML5 聽音辨字六選一的圖示

方法二：使用語法產生器

HTML5 聽音辨字六選一有支援 HTML5 FUN 的烘焙機，我們可以在烘焙機中直接修改題庫及其它設定，試玩沒有問題以後，可以製作嵌入 Blogger 或網站的語法，再將語法貼到自己的網站中，變成自製旳遊戲。

按底下的連結或是圄示，即可開啟烘焙機：

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

相關連結

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

• 雄 : HTML5 : 聽音辨字使用雲端硬碟資料夾自動產生題庫

• 雄 : Flash : listening2 聽音辨字六選一

• 雄 : HTML5:語文高手題庫&國字加注音產生器

• 雄 : HTML5 FUN 精選集

更新記錄

• 2022.11.06 新增 imageLoadingTimeout、audioLoadingTimeout 兩個參數，可以自訂等圖片或語音載入的逾時秒數。
• 2022.11.04 修改題庫設定的結構；加入支援 embeded Blogger 及網頁；支援更多 Flash 版相容的設定參數；支援國字旁加直式注音的功能；無法載入聲音檔時，改用 TTS 的合成語音，並可自動判斷是否用 zh-TW 中文來發聲。
• 2022.11.02 加入 fontname 及 label_fontname 兩個參數，可以自訂文字的字體。
• 2017.10.05 更改語音及音效播放器，音效資料集中放在 assets/sound_data.js 檔案中。
• 2014.02.15 設定可用變數 URIformatVars 來傳入多行的字串；新增 options_total 設定參數，自訂要出現幾個選項。
• 2014.02.11 加入記錄成績用的 logger 參數。
• 2014.02.06 HTML5 版。
• 2010.11.06 Flash 版。