HTML5 : Speaking

 好友 (「嘰哩呱啦ACE」的格主) 發想了一個看文字或圖片提示後，利用麥克風說出答案，由程式進行語音辨識後，再核對答案的計時活動。前一陣子以瀏覽器語音辨識的功能，幫自己 HTML5 FUN 中的一些遊戲，加上了語音外掛來玩；有了這個基礎，看起來應該是不難再生出新的程式，哈！的確是「看起來」！中間卡了好多關，不過都一一解決了。這個程式就是底下要介紹的 HTML5 Speaking。

功能特色

HTML5 Speaking 進行的方式是：

• 看看提示
• 說說答案

所以玩的時候，必須使用支援語音功能的網頁瀏覽器，並允許開啟麥克風；一般電腦中常見的 Chrome、Edge、Safari ，Android 系統上的 Chrome，或是 iOS 系統上的 Safari，都有支援。

以下是 HTML5 Speaking 的功能特色：

• 可跨平臺使用，只要使用支援語音辨識功能的網頁瀏覽器，開啟網頁即可使用，不需要安裝。
• 可自訂題庫及選單，打造出適性的內容。
• 題目的提示可以使用文字或是圖片。
• 可依語言自行設定語音辨識的語言。
• 可自訂遊戲說明對話框的內容。
• 可利用 TTS 服務，以合成語音念出題目。
• TTS 可以指定多個播放速度，依序循環，每次以不同的速度來播放語音。
• 練習進度可以暫存，之後再載入，繼續完成進度。
• 提供單人模式自學，也可利用雙人模式進行共學活動。
• 可將題庫置於 Blogger 或是其它網站中，建置自己的線上版遊戲。

試玩與下載

HTML5 Speaking 可以在哪裡找到呢？

1. 如果要玩 HTML5 Speaking 範例題庫，或是下載打包好的檔案，就打開這個網站：
   
   【 HTML5 FUN 】
   
   ✔ https://gsyan888.github.io/html5_fun/
   
   
   在 HTML5 FUN 網站的選單中，找到有紅色麥克風圖示的 HTML5 Speaking，就可以開始玩範例題庫，甚至將打包好的檔案下載並儲存在自己的電腦中，然後修改成自己的題庫。

   

   HTML5 Speaking 的圖示
   
   

2. 另一個方式是利用這個語法產生器：
   
   【 HTML5 : Speaking@Blogger 語法產生器 】
   
   ✔ https://gsyan888.blogspot.com/2022/09/html5-speaking-blogger-embeded.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] 上的編號來介紹各部的功能：

1. 題目的提示區：可以是文字、圖片，或是兩者皆有。
2. 麥克風的開關按鈕：按下去後會變色，如果圖示變成紅色，當畫面出現「OK」以後，就可以開始利用麥克風說答案，供語音辨識；反之則是關閉語音辨識。
3. 辨識結果區：語音辨識有結果後，會自動進行答案的檢核；藍色的字為正確的，紅色的為錯誤的，灰色則為多餘的字。
4. 辨識歷程區：在這裡會顯示語音辨識的歷程，可以用來觀察，並修正自己的發音。
5. 合成語音播放鈕：按一下這個按鈕，可以播放答案的合成語音，供練習參考。如果照預設的語速設定(1.0倍、0.75倍、0.5倍)，同一題，每按一下，速度就會變慢一點，到最慢後又由正常速度開始播放語音。
6. 跳題按鈕：按一下即可跳過該題，進入下一題練習。
7. 工具箱開關：按一下，即可將工具箱打開或是收合。工具箱中有：
• 「說明」：按下去，可以顯示使用說明。
• 「選單」：如果有多組題庫時，可以叫出主選單；不然會出現模式選單。
• 「儲存」：需要將目前的練習進度儲存在本機時使用。
• 「載入」：按這個可以載入之前儲存在本機的舊進度，然後繼續接下去練習。

看完以上的基本介紹，就可以試試 HTML5 Speaking，利用它來練習各種語言了。

HTML5 Speaking 簡介影片

底下是 HTML5 Speaking 系列影片之一，介紹如何玩 HTML5 Speaking :

其它主題

本篇僅介紹如何玩玩 HTML5 Speaking，之後預計再完成的主題如下：

• HTML5 Speaking 題庫格式與題庫設定檔
• 如何利用 Blogger 來放 HTML5 Speaking 遊戲
• 如何製作 HTML5 Speaking 國字+注音的題庫

相關連結

• 雄 : HTML5 FUN
• 雄 : HTML5 : Speaking@Blogger 語法產生器

更新記錄

• 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 發想。

閱讀全文

HTML5 : Speaking@Blogger 語法產生器

HTML5 Speaking 是一個可以練習看文(圖)說話的自學小工具。學生看完提示(文字或、圖片)後，以麥克風說出答案，程式利用語音辨識的結果，來檢核答案正確與否，並給予回饋。

HTML5 Speaking 除了可以在 HTML5 FUN 網站中下載並改成自己的練習內容；有自己的網站或是 Blog 的人，也可以利用本頁中的「語法產生器」，製作可直接放在網路上玩的版本。

想要在 Blogger 中放自訂題庫的 HTML5 FUN Speaking 嗎？利用底下的語法產生器製作語法，再將語法貼入 Blogger 的文章中，即可以直接利用 Blogger 當儲存題庫、並讓別人來玩自製遊戲的空間囉！

底下可以試玩，也有語法產生及剪貼到自己 Blogger 的程序。

閱讀全文

LimeJS : 偵測是否在 iOS 的裝置中

忘了是從什麼時候開始，用 LimeJS 開發的 HTML5 程式，在行動載具上，會有一個問題不大，但卻令人困擾的小臭蟲。常常會遇到載入程式時，畫面的比例、位置不太對，明明利用 LimeJS 框架寫的程式會自動計算，並按設定的比例，盡量填滿瀏覽器視窗的，卻會有如底下兩個截圖的差異：

[圖1] 正常的畫面

[圖2] 未正常調整比例的畫面

以我寫的 HTML5單字高手來說，會像在 [圖1] 左下角有版本戳記；但是在 iOS 上，常常會變成 [圖2] 的樣子，比例稍大，然後周圍的部份就會被截掉。早期並沒有這個問題的，很明顯地，在 iOS 的 Safari，一定有改了什麼，而 LimeJS 這個古董級的框架沒跟上。

我後來發現，只要將載具旋轉一下，由橫拿變直拿，再由直拿變成橫拿，畫面就可以由 [圖2] 變成 [圖1]。不過，雖然這個方法可以解決問題，不但麻煩，也不是每個人都知道啊！

這兩天在寫新的程式，對這個問題實在覺得感冒，決定好好地追一下問題出在哪裡。

在 LimeJS 的原始碼中，控制畫面比例，包括啟始大小的計算、改變大小及旋轉......等，都是由 director.js 在控制。在 director.js 中，「invalidateSize_ 」就是負責計算調整大小的程序，所以在好幾個系統事件中，都會去執行它。

追一下有關行動載具相關的，有以下的片段：

//todo: look for a less hacky solution
if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}

在 director.js 中，它利用了「goog.userAgent.MOBILE」來判斷是不是行動載具，如果是，就會執行將畫面往上拉到頂，並重新計算大小、調整位置。

針對 goog.userAgent.MOBILE 偵錯，在 iOS 10.3.4 中，它得到的值是 True；而在 iOS 15 上，則為 False。這和在 iOS 10.3.4 中可以正確地調整大小，而在 iOS 15 不正常的結果是吻合的。這樣子，看來問題出在 goog.userAgent.MOBILE 並沒有正確地偵測到 iOS。

這讓我想起，之前寫「HTML5 幾A幾B」時，曾經有研究過如何偵測是否為 iOS，使用了這個判斷式：

if( /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
   )

最重要的其實是「navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1」，細節可以用這個當關鍵詞搜尋看看。

不過，如果是應用在 LimeJS 的「壓縮編碼」，navigator.maxTouchPoints 要改成 navigator['maxTouchPoints']，以免因為 maxTouchPoints 被編碼，又無法正常判斷。

綜合前述的測試結果，LimeJS 原始碼中的 director.js 中的這部份：

//todo: look for a less hacky solution
if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}

修改為：

//todo: look for a less hacky solution
if((goog.userAgent.MOBILE 
  ||  /iPad|iPhone|iPod/.test(navigator.platform)
  || (navigator.platform === 'MacIntel' && navigator['maxTouchPoints'] > 1)
)
&& !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}

這樣子，在 iOS 中，就可以自動調整位置及大小了。

有空再將 HTML5 FUN 中的程式，一個個重新編譯，並更新。

閱讀全文

HTML5 : 多行題庫設定之修正

人多半會有盲點，往往在和他人的討論、互動中，可以察覺到自己過去沒發現的問題。

之前為了讓大家可以簡單而有結構地自訂我設計的 HTML5 小工具題庫，在設定檔中，使用了一個特殊的小技巧，詳情可以參考這篇舊文：

• 雄 : JavaScript : 有多行內容的字串變數

當時使用一陣子以後，發現在多行題庫設定中，第一行的內容的前幾個字有被吃掉的情形。研究了一下，「吃字」的原因是在不同平臺，使用了不同的「換行字元」。以 Windows 來說，當我們在文字編輯器中，按下 Etner 鍵時，一般會送出 CR (\r) 和 LF (\n) 兩個字元；在 Mac OS X 或是其它 Unix like 的系統中，，按下 Enter 鍵時，則是送出  LF (\n) 一個字元。這讓我在 Windows 中寫的解析多行內容字串指令，在不同平臺，會有不同的結果。後來，甚至因為瀏覽器的版本不同，也會產生問題。

為了解決前述的問題，最後我修改了擷取題庫設定的流程，先用一小段指令，來計算應該要擷取多長的字串。像這樣：

//測試區塊開始
CR_LF_test = function(){/*--這一行請勿更改--
CR_LF testing block
-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2,-9);
CR_LF_First_Pos = CR_LF_test.indexOf('_LF')-'CR_LF'.indexOf('_LF');
//測試區塊結束

計算完的「CR_LF_First_Pos」長度，可以應用在題庫的擷取指令中，類似這樣：

questionLines = function(){/*--這一行請勿更改--
angry##生氣##mp3/angry.mp3
smile##微笑##mp3/smile.mp3
cry##哭##mp3/cry.mp3
-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2+(typeof(CR_LF_First_Pos)!='undefined' ? CR_LF_First_Pos:0),-9);

看似完美，其實也正常運作了滿久。

今天一位朋友反應題庫的第一行有「吃字」的情形，看了設定檔，似乎沒什麼問題。在 Notepad++ 中，顯示所有特殊字元後，看到一個自己之前沒注意到的情境(以前面的例子來說明)：

• 在「CR_LF_test」中，「CR_LF testing block」的換行字元是用 Windows 的 CR + LF 兩個字元。
• 在「questionLines」中，每一行都是用 LF 一個字元來換行。

這樣一來，算出來的 CR_LF_First_Pos」就會多一，導致「questionLines」的第一個字元會被捨去不取用，而造成「吃字」的情形。

以前我在測試時，要嘛都是純 Windows 的環境，要嘛就是純 Unix like 的環境，環境單純，哈！人更單純！程式碼自然就單純得沒考慮到混用的情形，這就是一個人時的盲點。幸好有人跟我反應了問題，盲點被找出來了！

那如何解決前述的問題呢？

看來我根本不需要使用「CR_LF_test」那幾行，直接改一下題庫設定解析的指令就好，也就是將：

-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2+(typeof(CR_LF_First_Pos)!='undefined' ? CR_LF_First_Pos:0),-9);

改為：

-----*/}.toString().replace(/\r/g,"").slice("function(){/*--這一行請勿更改--".length+1,-9);

改了什麼關鍵呢？

• 利用「replace(/\r/g,"")」，將設定中的所有 CR (\r) 都先去掉，解決跨平臺的問題。
• 「slice」取字串的範圍是由題庫設定前一行字串(「function(){/*--這一行請勿更改--」)的長度加一(換行字元)，到尾巴的九個字元(「-----*/}」)。

經過這樣的修正，可以正確無誤的取到使用者設定的多行字串，只要再利用每一行都有一個「\n」的換行元，將它拿來當作分解各行的「分隔符號」，即可解析出自訂題庫的內容了。

後來也因為在測試這題庫設定的問題，發現我在「HTML5 單字高手」和「HTML5 English1200」中，原本設計可以去掉題庫空白行的功能沒發揮作用。順便將臭蟲除掉了。

一直以來，喜歡將東西與別人分享，喜歡幫別人解決問題，過程中可能要用掉不少時間，但在別人的問題中，我看到了自己的盲點，解決了別人的問題，其實也是解決了自己的問題，收穫最多的，還是自己。

相關文章

• 雄 : JavaScript : 有多行內容的字串變數

閱讀全文

Biking : 恆光→明德宮

天氣狀況 : 晴

TRIP DIST : 9.86
TRIP TIME : 0:44:57
AVG. SPEED : 13.10
MAX. SPEED : 41.4

想念貓空的山路了！那就再衝一回吧！

恆光橋這一側上貓空的好處是峰迴路轉，有陽光直射，也有涼快的綠蔭；每每被酷日烤過後，更覺得林蔭微風的美好。

泉南產業道路的綠蔭

這一側上山的另一個好處是人車相對的少，聞得到草香、花香，聽得著鳥語、蟲鳴。有時實在很難理解那些騎自行車，還要帶個喇叭，大聲放著音樂的人是什麼心態，在室外運動，尤其是往山裡騎車，不就是要讓自己暫時跳脫原有的生活情境，徹底的放鬆、調劑身心，為什麼不好好的聽聽大自然的聲音，還一路吵別人。

雖然很久沒騎這條路了，節奏還沒忘記，輕齒順順地騎，雖喘不累。

明德宮前的101

本來設定的目標是騎到草湳再折返，來到明德宫前，看看時間，得下山幫小孩準備午餐，只好等下一回囉！

閱讀全文

HTML5 : SVG transform-origin 與 rotate

朋友反應「雄 : HTML5 : 圖形計時器」的圓形計時器在 Safari 上，剩餘時間的圓圈位置會跑掉，回想了一下，當初在 iPad 上測試放大縮小的功能時，好像有「骨肉分離」的情形，只是因為當時主要是要給桌機使用，就沒理會這隻臭蟲。

[圖1] Safari SVG transform-origin 失效

會發生位置跑掉的問題，主要是因為這個圓形計時器是使用 SVG 繪圖，為了讓剩餘時間顯示的起點能在上方，並以逆時針方向減少，所以作者使用了 CSS 中的這兩個：

transform: rotate(90deg);
transform-origin: center;

也就是將 SVG 中，顯示剩餘時間的圓圈旋轉90度(第一行)，而且是以中央為旋轉中心(第二行)。這個應用在 Chrome、Edge、Firefox 上，可以正常運作。唯獨 Safari 有問題。

查一下 transform-origin 的說明：

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin

transform-origin 在 Safari 是「Partial support」，難怪使用 transform 的 rotate 會出問題。

在 Safari 中，由於 transform-origin: center 無法發揮作用，以致在執行旋轉90度的指令時，它是用預設的「0, 0」當座標的參考點，當放大後，計算的基準跑掉，旋轉後，位置也就跑掉了，變成 [圖1] 錯位的樣子了。

為了解決旋轉中心的問題，只好捨 transform-origin ，改成用設定 SVG transform 屬性的方法來進行旋轉：

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

關鍵在這個：

rotate(<a> [<x> <y>])

當我們在 SVG 中的 transform 使用 rotate 時，可以使用三個參數，後面兩個用來指定旋轉中心。所以我將作者原來 CSS 那兩行先拿掉，改在 SVG 畫剩餘時間圓圈的 path 指令中加入了：

transform="rotate(90,45,45)"

「45,45」是 SVG 圖形在不放大時的中心點，這樣子，畫出來的圓圈就不再亂跑了。

以為這樣子就完美了嗎？

Safari 和 Firefox 都沒問題，在 Chrome 上，它卻會先錯位，然後再自動地慢慢移到正確的位置，試了一下，如果把原 CSS 的那兩行再加回去，它才完全不亂跑，真的是整死人了！

沒關係，既然 Chrome 有需要，就再利用 CSS 的語法：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.base-timer__path-remaining {
transform: rotate(90deg);
transform-origin: center;
}
}

上面限定只有在瀏覽器是 Chrome 時，才會加上 transform 和 transform-origin。

先這樣頭痛醫頭，腳痛醫腳，暫時頂著用，有時間再來看有沒有一體通用的方法。

相關文章

• 雄 : HTML5 : 圖形計時器

閱讀全文

FFmpeg : 修改 .srt 字幕檔內的時間

 FFmpeg 可以用來幫影片加字幕，那可以編輯字幕檔內，各段文字出現的時間嗎？

我找到了一部影片的 .srt 字幕檔，但是發現它的時間比影片晚了 15點多秒鐘，找了一下資料，利用 FFmpeg 的「 -itsoffset」參數，就可以控制字幕出現的時間。例如

ffmpeg -itsoffset 10 -i subtitle_file.srt  output.srt

它就會將 .srt 中的所有時間，通通加上10秒鐘，然後輸出到 output.srt。

如果時間用負數，例如：

ffmpeg -itsoffset -10 -i subtitle_file.srt  output.srt

它就會將 .srt 中的所有時間，通通提早 10 秒鐘。

哈！這樣是不是很棒！

不過，經過實際操作，「 -itsoffset」參數使用負數的時間，必須要「夠減」才行。像我的字幕檔中的內容大概像這樣：

1
00:00:01,000 --> 00:00:06,000
== xxx xxxx==

2
00:00:15,065 --> 00:00:16,266
xxxxxx？

3
00:00:16,266 --> 00:00:18,502
xxxxxxxxxxx

我想將每一行字幕，通通提早 16 秒鐘，就執行以下的指令：

ffmpeg -itsoffset -16 -i subtitle_file.srt  output.srt

第 1～2 行字幕因為不夠減，就無法正確的顯示了。

因此我做了兩個修正：

• 改成通通提早 15 秒鐘就好(這樣子第2行字幕之後的，就不會有時間不足的情形)。
• 手動修改 .srt 中的第一行字幕的時間為：
  00:00:15,000 --> 00:00:15,000

這樣子就可以使用底下提早 15 秒鐘的轉換指令：

ffmpeg -itsoffset -15 -i subtitle_file.srt  output.srt

實作的結果，還不錯！影片的語音跟字幕是對得上的。

相關文章

• 雄 : 用 FFmepg 為影片加字幕

閱讀全文

Android : 解決無法移除 FB Messenger 帳號

 Android 手機借朋友用 Facebook Messenger 發訊息後，以 Messenger 的「帳號管理」要移除帳號，出現了底下的訊息：

此帳號也已經在這部裝置上登入Facebook。你必須從 Facebook 登出此帳號，才能將其移除。

好的～那就照著操作，先到 Facebook 的程式中去登出，重新回到 Messaenger 去移除帳號，結果還是出現 [圖1] 的訊息！

[圖1] Messenger 無法移除帳號

今天是愚人節嗎？像鬼打牆一樣！明明 Facebook 已經登出，甚至選了「從裝罝移除」了，它還是說沒有登出！

好！使出大絕招，將 Facebook 和 Messenger ，甚至 Meta ...  的應用程式，通通移除，也利用檔案管理的工具去一個個目錄查過了，似乎沒有留下什麼資料了，總該是乾淨的狀態了吧！重新將相關的應用程式安裝回來，再開啟 Messenger 看看。

是的！我還是失敗了！要真那麼順利，就不用寫這篇筆記了。

查了一下，原來在 Android 中，Facebook 的帳號資料是儲存在系統中，所以要刪除的話，應該要利用 Android 的系統設定中：

• 帳號與備份
• 帳號

[圖2] 帳號與備份

找到如 [圖3] 這樣的選單：

[圖3] Facebook 的帳號清單

清單中，有 Facebook 圖示的，那串數字 Facebook 帳號的 ID。想刪除哪一個，就按一下進入，然後就會有類似 [圖4] 的畫面：

只要按一下 [刪除帳號] 就可以將本裝置中該 Facebook 帳號資料刪除。

不過，在按上面的按鈕之前，建議先在 Facebook 應用程式中先登出、移除，並關閉應用程式，不然，再次啟動 Facebook 應用程式時，可能該帳號又「復活」了。

重新列出要順利在 Android 中的 Messenger 刪除帳號的程序：

• 在 Facebook 應用程式中：
• 登出帳號
• 按帳號右側三個點點，由選單中按「從裝置中移除帳號」。
• 在系統設定中：
• 進入「帳號與備份」
• 進入「帳號」
• 如果找到要刪除的 Facebook 帳號，進入並按「刪除帳號」。
• 最後在 Messenger 應用程式中，利用設定中的「管理帳號」，找到要刪除的帳號，長按後，按刪除(垃圾桶圖示)。

沒想到刪一個帳號，要搞得這麼複雜，真的是圈圈叉叉！

閱讀全文

Biking : 偏擺與爆胎

印象中，騎那麼久的自行車，只有一次在路邊換備胎，但因為是防剌胎被剌穿，內胎的氣是慢慢洩掉的。本週日(大暑的隔日)則是突然聽到「砰」！一聲，瞬間「消風」。騎的這部自行車是同事移轉過來的舊車，所以什麼工具都沒有，只好慢慢地牽回家，哈！還拎著三個便當呢！

昨天將內胎拆下後，看到一個明顯的爆裂點，而外胎的側邊也有明顯的破損：

爆裂的外胎

本來以為大概是天氣太熱才導致爆胎，不過再仔細的回想了一下，其實之前就有將爆的症兆：

• 騎乘時有輕微偏擺的情形。
• 滑行的距離變短。
• 在觀察為什麼偏擺，以手搖踏板，偶有卡卡，踏板需重壓才能動的情形。

前一天因為久沒打氣，發現胎壓不足，於是把輪胎打好打滿（多半是太滿了！），加上氣溫高，柏油路面溫度更高，外胎老舊......多重因素之下，後輪就這麼爆了。

拿出之前備很久沒用的「新」內胎要換時，也是快昏倒：

全新的內胎長這樣

哈！兩條全新的內胎都像照片中那樣，在有摺痕的地方裂開了兩處以上，照片中這條是最慘的；這下是「有備無換」了，備了胎，卻無法用。查了一下，其實很多人都有類似的經驗，內胎擺久了會壞，不然就是得將它稍微打氣，放在陰涼處，或許可以放久一點。

最後去自行車行買了一條建大 1.5 的防剌胎，加一條正新 1.75 (店內無 1.5 的存貨)的內胎，老闆本來說 1000元，攀談了好一會兒，他自己降價，900元成交。雖然比我印象中的價錢貴了一點點，能拿到現貨可以立即換，了卻一椿事還是比較重要。

建大這條外胎比之前習慣用的馬牌防剌胎軟多、好換多了，哈～希望它的防剌效果不要也那麼「軟」！

換好之後，試騎了一下，後輪偏擺的情形消失了。騎車還是要多體察車子的狀況，不然「顧路」，或是受傷了，很不划算的。

閱讀全文

DIY : 簡易混音器

2021 年時，想用手機錄畫面，才發現 Android 錄畫面時，錄不到輸出的聲音，查了半天資料，找到了關鍵字「audio loopback」，然後參考了這篇「Audio Loopback Dongle」：

• https://source.android.com/devices/audio/latency/loopback?hl=en

它主要是將原本要輸出給耳機的聲音，導回給麥克風；而在錄畫面時，麥克風的聲音是可以同步錄下的，這樣一來，就能把原本錄不到的聲音，用跳板的方式，同步錄下來了。

參考「Audio Loopback Dongle」的電路圖，稍微修了一下，另外加上 TRRS 母座，可以插耳麥接聽輸出的聲及說話。這個簡易混音器，試了一下，搭配 Kimcy929a 的 Screen Recorder ：

• https://play.google.com/store/apps/details?id=com.bytelogs.screenrecorder

就可以解決我 Android 手機無法同時錄影跟錄音的問題 (如果 Android 的版本較新，這個問題應該已經解決，不過，我的手機只能到 Android 9)。

後來看到有人在討論 Google Meet 除了用「分頁模式」，遠端學生無法聽到老師聲音的問題；前面的簡易混音器再度登場，它可以將電腦本來要輸出給喇叭的音源和麥克風混音以後，再由麥克風的途徑輸入給電腦，這樣子，無論 Google Meet 使用任何模式分享畫面，遠端都可以同時聽到電腦的輸出的聲音及麥克風的聲音。

不過，在使用後，才發現，如果沒有音量調整實體鈕來控制電腦輸出聲音的大小，有時會蓋掉麥克風的人聲，所以後來又幫簡易混音器加上了一個電位器，這樣使用時更方便。[圖1] 是修改過後的電路圖：

[圖1] 簡易混音器電路圖

[圖2] [圖3] 的混音器是利用舊電話拆下來的電位器(R3: 50kΩ)、舊平板拆下來的 TRRS 母座(J2) 及一個全新的 TRRS 端子(J1)所組成的。

[圖2] 簡易混音器

[圖3] 簡易混音器

使用時，左側的 J2 可以插上耳麥監聽及說話；右側的 J1 則插到手機或是平板的耳麥插座，如果是接桌機，則可以用一母(TRRS)轉二公(TRS)的轉接線 [圖4]，將 J1 分為耳機插頭跟麥克風插頭，再插到電腦的耳機與麥克風插孔中。

[圖4] TRRS 轉 TRS x 2 的轉接線

看到這邊，哇！可以應用在手機或平板，是不是就可以解決 Google Meet 在 iPad 上無法分享聲音的問題？

iPad 與 Google Meet 分享聲音

關於 Google Meet 在 iPad 分享聲音的問題，可以看一下我錄的測試影片：

影片中使用的簡易混音器是 [圖5] 這個：

[圖5] 可斷開麥克風功的簡易混音器

測試影片中的 iPad 有成功在 Google Meet 中分享聲音給遠端，主要是有特別去將「耳機」的音量及「電話」的音量調小，前者用虛擬調整鈕調整，後者用 iPad 的實體按鈕調整。

不過，只要使用麥克風講話，或是遠端的人有發言，分享的聲音就可能因為回授的關係而變小或是消失，所以需要將 [圖1] 右側中的 J1 插掉後重插(有可能因為這樣而讓 Google Meet 斷線)。如果音量調整得不好，或是大家都很多話，會很不穩定。

所以結論是，使用 Google Meet 分享聲音，還是筆電或是桌機比較穩定而容易些。

立體麥克風

前面 [圖2] 和 [圖5] 的混音器，設計時，因為考慮可以直接插手機或是平板，所以都是針對 TRRS 的端子設計，也就是麥克風都是單聲道而已，所以只用一個電位器來調整音量。

個人常用的麥克風是以前 AIWA 隨身聽附的立體電容式麥克風，為了讓它保持立體聲，所以我利用光碟機拆下來的控制板 [圖6] :

[圖6] 光碟機的控制板

改裝成 [圖7] 的混音器：

[圖7] 光碟機控板改裝的簡易混音器

我將接到電腦喇叭和麥克風的外接線改了一下，加裝了 2.54 的母座，這樣就可以直接插在三根 2.54 的針腳上，喇叭的音量可以用雙聲道的電位器來調整大小聲，然後再串接到麥克風的左、右聲道，這樣子，就可以維持麥克風的立體聲。

閱讀全文

HTML5 : 圖形計時器

這是一個簡易的倒數計時計時器

• 在計時器左上角可設定倒數秒數，並啟動計時。
• 在計時器左下角按鈕按下後，可用語音設定並開始計時，例如：
• 1分30秒「開始計時」。
• 2分鐘「開始計時」。
• 可以自訂計時器的代號(預設代號為 timer)，透過網路來遠端控制計時器。

計時器代號：

時間設定

秒數:

提醒:

警示:

剩餘時間圓環顏色設定

一般:

提醒:

警示:

時間文字設定 【註】位置90～-90, 0 為中央

顏色:

大小:

位置:

畫面背景顏色：

指定音效：

 

To:

秒:

Timer Source: Mateusz Rybczonec - Modified by gsyan

緣起

之前想玩一下在視訊報告時，在自己的頭像上疊一個計時器，於是在網路上找到了Mateusz Rybczonec 的這個圓形的計時器：

• https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/

把這個計時器的文字位置調整到圖的底部後，讓它加入到 OBS 的「瀏覽器」元件中，再啟動 OBS 的「虛擬相機」，就能達到我要的效果，報告時，有個計時器同步顯示，滿好玩的。

[圖1] OBS 虛擬相機與 Google Meet 子母畫面中的頭像

進化

不過前面的計時器應用在 OBS 的瀏覽器元件中，有個小問題，無法控制計時器什麼時候開啟，使用時要回到 OBS 去操作。

於是我將前一陣子在玩的 HTML5 FUN 語音外掛，加了進去。打開麥克風，說：「5分鐘，計時開始」，然後計時器就開始跑了！想起來是不是很完美？哈！不過，我試了半天，在 OBS 就是無法讓我打開麥克風，然後說話！查了半天，別人說有用的方法，硬是無法用。

沒關係！我還有一招，就是利用「雄: HTML5 : remoteClick 網路遙控器」中使用的遠端遙控技術，由另一個計時器去控制 OSB 中的那個。哈！是不是很好玩！

使用方法

計時器的使用方法很簡單，在為計時器取個簡單的「代號」，例如：「myXxXx」，因為它可以被遠端控制，所以建議不要用預設的 timer 當代號，不然，如果大家都用 timer 當代號，一按啟動鈕，大家的計時器都一起連動了。

設定了自訂的計時器代號以後，就可以按「按這裡開啟計時器」的按鈕來進行計時器的畫面了。

[圖2] 計時器的控制

設定時間與開始計時

開啟計時器以後，計時器的控制方塊在畫面的左上角：

• To : 這個欄位可以指定要送控制指令給哪一個代號的計時器，預設是自己的代號。
• 秒 : 這個欄位可以輸入要倒數計時的秒數，例如： 輸入300，就是五分鐘。

設定好就可以按「開始計時」的按鈕，送出控制指令囉！

另外一個方式是直接用麥克風，以語音指令控制，可參考後面的說明。

暫停與繼續

畫面中的計時器，在計時的過程中，如果想暫停，就按一下計時器，想繼續計時，就再按一下計時器。（哈～突然想到，目前無法控制遠端計時器的暫停跟繼續）。

調整大小

計時器畫面的右下角有一個拉桿，可以用拉桿來調整計時器的大小。(2022.07.09 加入)

離開

想離開計時器，就按一下畫面右上角的叉叉圖示。

語音控制

如果瀏覽器有支援語音辨識，計時器的左下角會有 [MIC] 的圖形按鈕。想用語音來設定倒數計時的時間跟啟動計時，先按一下 [MIC] 的藍色按鈕，當它變成紅色時，就可以按以下的格式，說出計時的時間跟啟動計時的語音指令：

• 開始計時。（套用之前設定的秒數）
• ？秒鐘，開始計時。
• ？秒，開始計時。
• ？分鐘，開始計時。
• ？分？秒，開始計時。

示範影片

Q&A

• Q1 : 進入計時器的畫面後，如何更改計時器代號？
  
• A : 計時器代號只能在進入計時器前設定，所以想更改代號，只好將頁面重新整理，重頭來過。
• Q2: 如何更改音效播放及顏色變換的時間點？
• A : 請參考 Q5。
• Q3 : 將計時器加入 OBS 時，如何「去背」？
• A : 計時器的背景顏色為「#F9F9F9」，可以利用 OBS 元件裡，「濾鏡」中的「色彩鍵」，設定值：
• 「關鍵顏色」設為「#F9F9F9」。
• 「相似性」設為「1」。
• 「平滑度」設為「100」。
• Q4 : 可以在一進網頁，就自動設好計時器代號嗎？
• A : 可以的，例如，想使用「timerOBS」當作計時器的代號，在網址的後面加上「?username=timerOBS」，這樣子，每次開啟頁面，就會使用 timerOBS 當作計時器代號的預設值，而不用再行手動輸入。
• Q5 : 網址的後面除了可以加 username 來設定計時器代號，還有其它可自訂的參數嗎？
• A : 網址後的可加入的自訂參數如下：
• username : 設定計時器代號。
• time : 設定倒數計時的秒數。
• warning : 設定剩幾秒時，顯示時間快到的狀態，變「黃色」，並加入滴答的音效。
• alert : 設定剩幾秒時，變成「紅色」。

相關文章

• 雄: HTML5 : remoteClick 網路遙控器
• 雄 : HTML5 FUN 語音外掛
• 雄 : HTML5 : SVG transform-origin 與 rotate

更新記錄

• 2022.08.19 修正遠端遙控服務失效時，無法使用的問題；修正有些時間設定，導致最後剩餘時間的圓圈未變成紅色(感謝網友 Wedo 通報600秒時，有此臭蟲)；修正下次啟動時，時間終了音效未先關閉的問題。
• 2022.08.17 修正在 Safari 瀏覽器中，剩餘時間的環會因調整過大小而沒對準中央；新增設定圓環顏色、時間文字、背景顏色、載入自定結束音效檔的參數。
• 2022.07.11 可在網址中使用 time、warning、alert 的參數在自訂預設的參數。
• 2022.07.09 使用語音指令時，「兩」不會變阿拉伯數字，所以在解析時間前，先將所有的「兩」置換為「2」；原來的音效檔使用 Base64 編碼，但會使得 blogger 載入時間過長，導致首頁的文章清單只能顯示一篇，因此將音效都改用 .mp3 檔案，由 HTML5 FUN 的 github 專案提供；在畫面右下角加入調整計時器大小的拉桿。
• 2022.07.03 加入音效。
• 2022.07.02 加入遠端遙控功能。
• 2022.07.01 加入語音控制功能。
• 2022.06.31 草稿版。

 

閱讀全文

修復 FB 沒抓到 Youtube 影片縮圖

用關鍵字「facebook share debug」找到 FB 的「分享偵錯工具」，我找到的網址如下：

• https://developers.facebook.com/tools/debug/?locale=zh_TW

連進去以後，在「偵錯」那欄的輸入區，貼上要修正的分享網址；然後按「偵錯」的按鈕。

在「抓取時間」那欄位，按「再次抓取」的按鈕，這樣子 FB 會重新抓取，並更新它的內容。

回到 FB 自己分享的那則中，按「編輯」，應該會出現新的縮圖，將文章重新儲存，即可完成更新囉！

閱讀全文

HTML5 : Bubble 量詞大考驗

「量詞大考驗」是我在2010年5月左右以 Flash 寫小程式，當時曾在噗浪上和噗友分享與討論，沒幫它寫過詳細的介紹文，只在自己網站的 Flash 作品集「雄之語文高手」頁面有了底下簡單的描述：

一隻、一枝、一打......這些量詞你知道怎麼用嗎？挑戰一下你對量詞的瞭解程度。遊戲的題庫可以自行擴充的，目前的題庫的來源主要是由雄老師將之前王文裕老師設計的"喜從天降”CAI 中的題庫轉換而來。

沒文章記錄，原本已經忘了是在什麼時候將 Flash 版的量詞大考驗改為 HTML5 版了，幸好在程式的一角有留下了 2012.11.28 的戳記，應該就是那日發布的吧？

最近重新檢視了自己的 HTML5 FUN 作品中，哪些可以使用HTML5 FUN 語音外掛，才發現 HTML5 Bubble 量詞大考驗很久沒維護了，於是幫它加上了音效，也把可自訂的題庫設定，改得更有彈性一點，順便補上這篇說明。

HTML5 版的量詞大考驗可以 HTML5 FUN 的網站中玩，或是下載回來，改成使用自訂的題庫：

• https://gsyan888.github.io/html5_fun/

HTML5 FUN 量詞大考驗

功能特色

HTML5 量詞大考驗主要是針對量詞的練習來設計，所以題庫中主要分為「量詞」、「名詞」和「說明」，而「名詞」的部份有對的跟錯的選項，所以每一個題組中共有四個部份；出題時，再由程式在量詞前面加上數詞組合成多選題的題目。

底下稍微介紹一下它的功能特色：

• 可跨平臺使用，免安裝，只要有支援 HTML5 的瀏覽器，即可使用。
• 支援自訂選單及自訂題庫，可以打造自己的量詞大考驗。
• 支援 HTML5 FUN 的語音外掛，答案可以用說的。

自訂遊戲

HTML5 量詞大考驗可以將題庫換成自訂的題目，第一個步驟是先到 HTML5 FUN 的網站中，將打包好的 html5_bubble.zip 壓縮檔下載回來，將它解壓縮以後，應該會有一個名為「html5_bubble」的資料夾，裡面跟自訂遊戲的相關的設定檔檔案如下所示：

• bubble_set.js (主設定檔)
• bubble_menu_set (選單設定檔)
• 題庫設定檔則都存放在名稱為 data 的資料夾中：
• b01-1.js (量詞找名詞生手級題庫設定檔)
• b01-2.js (量詞找名詞入門級題庫設定檔)
• b01-3.js (量詞找名詞高手級題庫設定檔)
• b02-1.js (名詞找量詞生手級題庫設定檔)
• b02-2.js (名詞找量詞入門級題庫設定檔)
• b02-3.js (名詞找量詞高手級題庫設定檔)

上面的設定檔，都可以使用純文字編輯器(例如 Windows 上可使用 Notepad++ 、記事本......) 來開啟並修改。

自訂選單

由 HTML5 FUN 網站下載回來的 HTML5 量詞大考驗中，預設使用的選單設定檔，檔名是「bubble_menu_set.js」。

選單設定檔主要的用途是讓程式知道要在畫面上呈現的標題及選單項目名稱；以及當選單項目被按下去以後，要載入哪一個題庫設定檔。所以它的設定項目不多。

[圖1] HTML5 量詞大考驗選單畫面及設定的對應

選單設定檔中可自訂的參數如下：

• menu_title : 畫面上方要出現的標題字。
• datafolder : 題庫存放的資料夾名稱。
• menu_items : 選單項目名稱和題庫檔檔名(兩者之間用逗號分隔)。

以 [圖1] 中的選單設定來說，當我們按下「量詞找名詞生手級」的選項以後，程式會到資料夾「data」(datafolder 指定的)中，找到「b01-1.js」這個題庫檔案，並載入題庫。

自訂題庫

由 HTML5 FUN 網站下載回來的 HTML5 量詞大考驗壓縮檔解壓縮後，有一個名稱為「data」的資料夾，裡面有六個範例題庫設定檔。以純文字編輯器開啟以後，即可修改為自己的題庫。

題庫設定檔中，能夠自訂的參數如下：

• numberOfQuestionsPerGame : 抽幾題題目來作答。這個參數如果設為 0 ，表示要將題庫檔中的所有題組都回答完，才會結束；因為可以自訂要回答幾個題組，結束遊戲。
• question_O_X_seperator  : 題幹、正確答案、錯的選項和解說對話框文字之間的欄位分隔符號。一個題組需要有四個欄位，所以應該會使用到本符號三次。
• options_seperator : 多個答案選項之間的分隔符號，對的答案和錯的選項都用同樣的符號。
• question_type : 題目類型
• 設為 1 時，數字(question_number_string)會由程式加到題庫的題幹欄位(第 1 欄)中。
• 設為 2 時，數字(question_number_string)會由程式加到題庫的選項欄位(第 2,3 欄)中。
• question_number_string : 可使用的數字列表，如果有多個時，以 options_seperator 設定的字當作分隔符號。
• question_lines : 題庫內容。這個參數最重要，它底下的每一行就是一個題組，如果有十行，就表示有十個題組。

在題庫設定檔中，最重要的是 question_lines ，它是題目的來源，格式很簡單：

• 一個題組一行。
• 每一行中以「question_O_X_seperator」指定的符號來分隔欄位，必須有四個欄位。由左而右，依序分別為「題幹」、「正確答案」、「錯的選項」和「解說對話框文字」。
• 「正確答案」和「錯的選項」中，如果有多個選項，就以「options_seperator」所指定的符號來分隔。

以 data 資料夾中的題庫設定檔 b01-1.js 來說，它的分隔符號、題目類型及數字列表設定值為：

question_O_X_seperator = ";";
options_seperator = ",";
question_type = 1;
question_number_string = "一,兩,三,四";

以題庫設定參數 question_lins 中的這一行為例：

頭;牛,山羊;馬,黑狗,猴子,鳥;計算牛、羊的單位。

和遊戲畫面對照的結果：

[圖2] HTML5 量詞大考驗題庫與畫面對照圖

「;」分號為欄位分隔符號(question_O_X_seperator)，題目中有三個「;」分號，將這個題組切為四部份：

• 頭
• 牛,山羊
• 馬,黑狗,猴子,鳥
• 計算牛、羊的單位。

「,」逗號為多選項的分隔符號，將正確答案切為兩個：

• 牛
• 山羊

「,」逗號為多選項的分隔符號，將錯的選項切為五個：

• 馬
• 黑狗
• 猴子
• 鳥

因為題目的類型(question_type)是設為「1」，[圖2] 中，飛鳥所拉的紅布條上有「四頭」，數字「四」是由「question_number_string」的設定值中，以亂數隨機取出來的，它和題組中的題幹欄位(左起第一欄)的「頭」合在一起，就變成「四頭」了。

當玩家選錯選項時，就會如 [圖2] 中，跳出解說的對話框，解說的文字是在題組設定中的第四個欄位，本題組是「計算牛、羊的單位。」。

以上的資訊在製作自己的自訂題庫檔案時，可供參考。

語音外掛

HTML5 量詞大考驗在瀏覽器有支援語音功能下，會自動載入語音外掛(畫面左下角有 MIC 的藍色啟動按鈕)。玩的時候，按一下藍色 MIC 鈕，變成紅色的，就可以用麥克風來說答案，程式辨識成功，並發現進行中的選項有該文字，就會幫忙觸發按按鈕的動作。

另外，畫面上的「繼續挑戰」、「開始挑戰」的按鈕，可以用語音來「按」。

相關連結

• 雄 : HTML5 FUN : 語音輸入外掛
• 雄 : HTML5 : Monster 詞語大挑戰

更新記錄

• 2022.06.24 建立說明文章。
• 2022.06.23 更改按鈕的元件，以支援更多的語音指令。
• 2022.06.22 加入音效。
• 2012.11.28 HTML版發布。
• 2010.05.06 Flash 版於噗浪分享。

閱讀全文

HTML5 : Monster 詞語大挑戰

2006年設計的 Flash 版詞語大挑戰在2012年初改寫為「Flash : Monster 詞語大挑戰」，年底又新增了 HTML5 版，讓它可以 iOS 中使用。

不過，一直沒把 HTML5 版的參數說明整理記錄，最近將題庫的格式改得更有彈性一點，也盡量讓它和 HTML5 FUN 中的其它程式類似；都快十年過去了，順便將 HTML5 版的說明完成。

Monster 詞語大挑戰可以在 HTML5 FUN 的網站中直接玩範例題庫；如果想自訂題庫，也提供下載程式及範例。

• https://gsyan888.github.io/html5_fun/

直接玩：

HTML5 FUN::Monster

功能特色

HTML5 FUN :: Monster 範例題庫是語詞填空的多選題，畫面下方會出現句子(題幹去掉填空的部份)，上方則會顯示候選的詞語(正確跟錯誤的選項):

HTML5 FUN Moster 的畫面

按下選項後，如果答對會加分，答錯則會有爆炸的音效。全部的正確答案都選完了，即可進入下一關(題)。雖然名稱是「 Monster 『詞語』大挑戰」，如果把題目換成數學式，也是可以哦！

簡單的說明一下功能特色：

• 使用 HTML5 開發，可以跨平臺、載具使用。
• 可自訂選單，對應不同的題庫。
• 可自訂題庫。
• 題庫支援單選或是多選擇題的題型。
• 題幹可自訂要填的位置及置換的符號。
• 如果瀏覽器支援，可以使用 HTML5 FUN 語音辨識外掛，答案用說的。

自訂題庫

HTML5 FUN 「Monster 詞語大挑戰」除了可以直接玩範例題庫，也可以將自己的題庫加入遊戲中；遊戲選單也可以自己修改項目名稱，及要載入的題庫設定檔。

如果想自訂題庫，第一個步驟是先到 HTML5 FUN 網站中，下載「Monster 詞語大挑戰」的壓縮檔，並解壓縮。接著就可以參考底下的參數說明，用文字編輯工具開啟相關的檔案來自訂選單，或是題庫。

先來看看「Monster 詞語大挑戰」的啟動程序：

1. 開啟 html5_monster.html 載入網頁及程式。
2. 載入並執行主程式 monster.js。
3. 載入主設定檔 monster_set.js。
4. 載入選單設定檔(由 monster_set.js 指定的檔名)，預設的檔案是 monster_menu_set.js。
5. 載入題庫設定檔(由選單設定檔中指定項目名稱和設定檔的對應關係)。原始的範例題庫設定檔有兩個:
   * 心緒類語詞:初級篇 : monster_set_basic.js
   * 心緒類語詞:高級篇 : monster_set_advance.js
6. 開始玩。

上面的檔案，在下載回來的解壓縮檔解壓縮以後，應該可以 html5_monster 的資料夾中看到。

自訂選單

下載「Monster 詞語大挑戰」，並解壓縮好的 html5_monster 資料夾中，應該可以找到一個檔名為「monster_menu_set.js」的檔案，這個檔案就是「Monster 詞語大挑戰」的選單設定檔。我們可以用純文字編輯工具(例如 Notepad++ 或是 Windows 的記事本)來開啟。

monster_menu_set.js 的範例檔中有底下的內容：

menu_title='詞語大挑戰';
menu_items = new Array(
  "心緒類語詞:初級篇,monster_set_basic.js"
, "心緒類語詞:高級篇,monster_set_advance.js"
);

選單設定檔內容，對照「Monster 詞語大挑戰」的選單畫面如下圖所示：

HTML5 Monster 選單設定與選單對照圖

設定檔中只使用到兩個參數：

• menu_title : 選單上方的標題字。
• menu_items : 選單項目的設定。
  

觀察一下選單項目的設定格式，像這樣：

「項目名稱」「逗號」「題庫檔檔名」

所以當使用者按下選單中的「心緒類語詞:初級篇」，程式就會試著去載入「monster_set_basic.js」這個題庫設定檔，載入成功，就可以開始玩。

自訂題庫

前面提到，我們在 monster_menu_set.js 的選單設定中，指定按哪一個選項，讓程式去載入哪個題庫設定檔。範例中，按「心緒類語詞:初級篇」，程式就會試著去載入「monster_set_basic.js」這個題庫設定檔；我們可以利用純文字編輯工具開啟「monster_set_basic.js」，來編輯它的內容。底下來看看可以自訂哪些參數。

• scoreToAdd : 答對時加幾分。
• scoreToMinus : 答錯時扣幾分。
• timerDefault : 倒數計時的秒數。
• question_O_X_seperator : 「題幹」、「正確答案」和「錯的選項」之間的「欄位分隔符號」，共分為三個欄位，所以一個題組(一行)中，應該會使用到這個符號兩次。
• options_seperator : 「正確答案」和「錯的選項」都可以有多個，每個選項之間，用這個符號來當分隔。
• blank_pattern : 在題幹中，要變成「填空」的地方；程式只要看到題幹字串中，和設定值一樣的地方，就會用「blank_replacement」設定的值來置換掉。
• blank_replacement : 程式在題幹中，找到「blank_pattern」後(「填空」的地方)，要置入的字串。
• question_lines : 題庫。它底下的每一行就是一個題組。所以十行就有十個題組。

其中最重要的是 question_lines ，它是題目的來源，格式很簡單：

• 一個題組一行。
• 每一行中以「question_O_X_seperator」指定的符號來分隔欄位，必須有三個欄位。由左而右，依序分別為「題幹」、「正確答案」和「錯的選項」。
• 「正確答案」和「錯的選項」中，如果有多個選項，就以「options_seperator」所指定的符號來分隔。

假設分隔符號及填空設定值為：

question_O_X_seperator = "##";
options_seperator = ",";
blank_pattern = "◎";
blank_replacement = "(　)";

HTML5 FUN Monster 題庫格式

解說一下「 question_lines 」中的這一行：

他的惡作劇，讓大家◎。##很難過,很不高興,很生氣,很討厭,受不了,發火,發狂##開心,佩服,喜歡,喜愛,感動

我們可以看到有兩個欄位分隔符號「##」，將這個題組切為三部份：

• 他的惡作劇，讓大家◎。（題幹）
• 很難過,很不高興,很生氣,很討厭,受不了,發火,發狂（正確答案）
• 開心,佩服,喜歡,喜愛,感動（錯的選項）

題幹的部份，「◎」會被程式用「(　)」置換掉，變成：

他的惡作劇，讓大家(　)。

確答案會再用選項的分隔符號「,」，切為七個：

• 很難過
• 很不高興
• 很生氣
• 很討厭
• 受不了
• 發火
• 發狂

而錯的選項也會再用選項的分隔符號「,」，切為五個：

• 開心
• 佩服
• 喜歡
• 喜愛
• 感動

參考上面題庫的格式，您就可以設計自己的的 HTML5 Monster 囉！

語音外掛

HTML5 Monster 在瀏覽器有支援語音功能下，會自動載入語音外掛(畫面左下角有 MIC 的藍色啟動按鈕)。玩的時候，按一下藍色 MIC 鈕，變成紅色的，就可以用麥克風來說答案，程式辨識成功，並發現進行中的選項有該文字，就會幫忙觸發按按鈕的動作。

另外，畫面上的「回主選單」、「重新挑戰」可以用語音來「按」。

相關文章

• 雄 : HTML5 FUN : 語音輸入外掛
• 雄 : Flash : monster 詞語大挑戰

更新記錄

• 2022.06.23 修正在 iOS 中，音效無法播放的問題；修改對話框的按鈕，讓它可以使用語音來「按」。
• 2022.06.13 修改題庫格式，舊格式仍可相容；新增自訂題庫資料分隔符號的參數 question_O_X_seperator、options_seperator；可自訂填空置換的搜尋字串參數 blank_pattern ，及要置換成什麼的參數 blank_replacement。
• 2012.12.01 HTML5 版
• 2006.04.15 Flash 版

閱讀全文