2022年12月5日 星期一

字幕檔轉為 oTranscribe 線上聽打逐字稿工具的格式

2022年12月5日 星期一

「oTranscribe」是一個線上聽打逐字稿的工具，我們可以將影音檔案，或是 Youtube 的網址指定給它，播放影音後，邊聽邊打逐字稿。用 oTranscibe 來聽打逐字稿跟自己以影音播放器播放後，邊聽邊打，有什麼不同？主要是它提供了一些快速按鍵可以比較簡便的操控影音，最重要的是可以用快速按鍵，或按按鈕，在文件上加上聲音播放到哪裡的「時間戳記」，之後，只要按一下「時間戳記」的連結，可以快速回放重聽，再修正或補充文字。

 oTranscribe 可以將編輯好的內容匯出成常見的格式儲存，如果匯出的是 oTranscribe 的格式(副檔名 .otr)，日後重新匯入後，影音的「時間戳記」也會被重現。

oTranscribe .otr 的檔案內容，其實是 JSON 格式，主要分成「text」跟「media-time」兩部份；「text」中是使用 HTML 的語法，這裡面，涵蓋我們聽打時編輯的文字及時間戳記，只要了解時間戳記的表示語法，就可以將常見的影片字幕檔案(.srt、.vtt) 轉為 oTranscribe 的 .otr 格式。 這樣子，無論我們用「pyTranscriber」或是「剪映」將聲音轉為文字的 .srt 檔案，轉為 .otr 格式後，可以匯入 oTranscribe 中去邊聽，邊校正內容了。 

格式轉換工具

底下這個工具可以將字幕檔轉為可供 oTranscribe 匯入的檔案。使用的方法很簡單：

  • 上載字幕檔案。將字幕檔，例如 .srt 或是 .vtt　檔案，拖曳到圓圈內；也可以按一下圓圈，再選取要轉換格式的字幕檔案。
  • 下載轉好的檔案。如果轉換成功，在圓圈的下方會出現「下載」的按鈕，按下去就能將 oTranscribe 格式的 .otr 下載並儲存在電腦中。

來試試這個格式轉換工具吧！

範例檔案下載

這裡我以 Vocaroo 錄了一分鐘左右的音檔，並利用「cSubtitle」線上聲音轉文字的工具，將 MP3音檔轉出字幕檔案。可以先下載 SRT 格式範例字幕檔來玩玩轉換 oTransribe 格式，然後將 MP3 檔案及轉好的 .otr 檔案匯入 oTranscribe 網站中試試它的聽打功能。

oTranscribe 檔案的匯入

如果已經將 .srt 的字幕檔案轉為 oTranscribe 格式的 .otr 檔案，就可以將 .otr 檔案匯入 oTranscribe 中測試。

進入 oTranscribe 的網站 ( https://otranscribe.com/ ) 後，上方可以自行切換要使用哪一種語言，裡面也有繁體中文。好了就可以如 [圖1] 按「」開始使用:

[圖1] oTranscribe 網站的首頁

接著如 [圖2] 箭頭所示，按下後可以指定要使用哪一個影音檔(或是 Youtube)來檔聲音的來源:

[圖2] 指定要聽的影音檔案或 Youtube 網址

如果想匯入 oTranscribe 格式的 .otr 檔案，就按一下 [圖3] 箭頭所指的圖示

[圖3] 匯入 oTranscribe 格式的 .otr 檔案

成功匯入後，應該會類似 [圖4] 的樣子，按了上方的影音播放鈕後，按任何「時間戳記」，就可以快速地播放那個時間點的聲音。

[圖4] oTranscribe 的時間戳記可以跳到要聽的時間點

關於 oTranscribe 的操作，可以上方功能選單的「Help」查看。

相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2022年12月2日 星期五

HTML5 : 臺灣行政區地圖隨選器

2022年12月2日 星期五

 最近在幫「雄 : HTML5 : 造句靈感產生器」改造，讓它可以變身為一直未改版為 HTML5 的「雄:Flash : ImageSelector 圖片隨選器」。「靈感產生器」抽牌時，採用的是翻牌動畫，而「圖片隨選器」用的是快速抽換多張圖片，翻牌只是兩張圖片的變換，看不出圖片檔來不及載入的問題；而快速抽換多張圖片，如果有圖片檔案太慢載入，就會造成「閃爍」的情形。

所以，為了解決「閃爍」的問題，只好將要用到的圖片檔案都先載入後，再開始製作動畫效果。根據以往的經驗，有時候，只要新增元件，不用將它加到畫面中，就能達到「預載」的效果；實作的結果，原本閃爍的問題在 iOS 上很明顯，利用「new Image」，並將圖片的路徑指定給它後，不需要加到網頁的頁面中，在 iOS 上的 Safari 就不閃爍了。但是......哈！可怕的「但是」出現了！在 Chrome 中卻偶爾會閃一下，在 Firefox 上則完全沒有效果，閃到眼睛都花了。

為了解決在 Chrome 及 Firefox 的問題，試著在預載的程序中多做一個動作，將圖片真的加到頁面中，果然就不閃爍了。可是大大的預覽圖片實在破壞版面，那～將它放到畫面可視範圍外，眼不見為淨，總可以了吧？哈！我測試的結論是，Chrome 欣然接受，Firefox 還是不高興。最後一招，將圖片的大小設為 1x1 後，再加入頁面中；這招在早期設計網頁時，滿常用的，我們眼睛看不見，但是瀏覽器卻因此而認定它是存在的，而不會不載入圖片。

果然！將所有的圖片都用 1x1 的尺寸大小，加入頁面中後，Firefox 也開心了，解決了將「靈感產生器」變身為「圖片隨選器」的大問題。

下面是利用張崴耑老師「搜秀資源網」中的台灣行政區手繪地圖：

將 22 張縣市的手繪地圖，結合改版後的「雄 : HTML5 : 造句靈感產生器」，製作成範例「地圖隨選器」。

[圖1] 按紅色箭頭處可抽地圖

[圖2] 按語音播放鈕可聽縣市名稱

玩法是這樣的：

  • 先按一下 [圖1] 中的問號，或是畫面右下角的「洗牌圖示」，它會隨選一張縣市地圖。
  • 想一想，地圖是哪一個縣市的？
  • 想核對心中的答案是否正確，就如 [圖2] 所示，按一下地圖下方的語音播放鈕，程式會以合成的語音說出縣市名稱。

「臺灣行政區地圖隨選器」的連結在下方，按一下就可以考考自己記得多少：

如果也想做一個自己的圖片隨選器，可以使用這個：


相關連結
閱讀全文
By at 沒有留言:
標籤: , , ,

2022年11月22日 星期二

HTML5 : 我說你猜 : 比手畫腳

2022年11月22日 星期二

我說你猜，你說我猜；比一比，猜一猜；大家一起來比手畫腳。

比手畫腳很多人都玩過，朋友推了 TheEllenShow 頻道中的這部影片給我看：

利用平板或手機的陀螺儀(動作及方向感應器)來「翻牌」，滿方便的。2012年曾經研究過怎樣以 HTML5 加上陀螺儀來控制遊戲中的角色移動，哈！十年過去，只能重新研究，也因此，HTML5 FUN 的「 我說你猜」上線囉！

HTML5 Charades 成績報告畫面

HTML5 Charades 計時器選單畫面

特色與功能

「HTML5 我說你猜」有以下的功能與特色：

  • 以支援 HTML5 的瀏覽器來開啟頁面，即可使用，跨載具、跨平臺，不需要安裝。
  • 可以自訂題庫、每回合計時秒數及其它客製化的參數內容。
  • 手機、平板有陀螺儀，如果啟用感應器，目前會偵測裝置「垂直」、「往前傾」和「往後躺」三個動作，用來啟動、翻牌和表示「正確」「跳過」。
  • 在沒有動作及方向感器的電腦也可以玩，翻牌改以畫面中的按鈕操作。
  • 電腦支援「快速按鍵」預設以方向鍵右來按「正確」、「重玩」，方向鍵左來按「跳過」、「選單」，及方向鍵上下來捲動作答結果清單。(2022.11.23 明勳老師建議)
  • 有預覽題目的功能，在選定題庫後，顯示所有題目的內容，可以讓老師與學生事先討論遊戲策略。(2022.11.24 明勳老師建議)
  • 可匯入預先製作好的題庫檔案。
  • 支援語法產生器，可以將自製的遊戲嵌入 Blogger、Goolge Sites 或其它網站網頁中。

試玩與下載

「HTML5 我說你猜」可以在 HTML5 FUN 網站中找到，可以試玩，或是下載打包好的程式及範例題庫；也可以使用本文章後面的「語法產器」來改題目，立即玩或是製作語法，放入自己的網站中。

HTML5 FUN 的網址如下：

「HTML5 我說你猜」的圖示是：

HTML5 我說你猜的圖示

找到圖示，按下去，即可玩範例題庫；覺得不過癮，就參考下一小節的說明，來自製遊戲吧！

自製遊戲

如果想製作自己的遊戲題目，又想利用手機、平板的動作偵測來控制遊戲的進行，建議使用本文章中的「語法產器」來輸入題庫，並製作語法，再將遊戲放到 Blogger 、Google Sites 或是其它有支援合法「HTTPS」的(經認證過的)網站。主要是因為較新的手機、平板系統(尤其是 iOS 12 以後)，對「動作及方向感應器」的啟用，基於安全的理由，有網站的限制。

按一下底下的按鈕，即可打開「語法產生器」，透過三大步驟，來更換自己的題庫，並利用「其它選項」，來做一些客製化的設定。試玩沒問題，最後就能按按鈕，輸出自製遊戲的嵌入語法。


Q&A

底下將一些可能會遇的問題列出來：

  • Ｑ：快速按鍵可以自訂嗎？
    • Ａ：當然可以自訂快速按鍵；利用「語法產生器」中，「設定其它參數」裡的「正確時的快速按鍵名稱」和「跳過時的快速按鍵名稱」即可設定。可用的按鍵的名稱可以由主設定檔「charades_set.js 」中的「keyCodes」找到。
  • Ｑ：為什麼無法啟用感應器？
    • Ａ：較新的系統，像 iOS 13 以後，遊戲必須放在支援 HTTPS 的網站中才能使用感應器。
    • Ａ：如果前一次的啟用不是按「允許」，瀏覽器會記住設定，即使按了「重新整理」也沒有用，必須要先關閉瀏覽器，重新再打開瀏覽器，才能再次設定是否允許使用感應器。
  • Ｑ：題庫可以不要選單嗎？
    • Ａ：可以的，有兩種方式讓遊戲跳過題目選單。
      方法１：如果題庫設定中，只有一個牌組，也就是只有一行題目，就不會出現選單。
      方法２：參考範例題庫設定檔「question-set-2.js」在題庫設定中，每一行只放一個題目，都不加任何欄位分隔符號(預設為兩個井字號)，這樣子，程式會自動將每一行合成一個牌組，不用打任何分隔符號，是不是比較方便！

相關連結

更新記錄

  • 2022.11.25 v.0.8 增加匯入題庫檔的功能，可以將預先製作好的題庫載入使用。
  • 2022.11.25 v.0.7 單行題庫時，未去掉第一欄的問題解決；新增 preview_col_number 的參數，用來自訂預覽時要以幾欄的方式呈現所有題目。
  • 2022.11.24 v.0.6 加入「預覽題目」的功能，如果啟用預覽，在選完題目後，會顯示所有的題目，並有 1~5 分鐘倒數計時後，自動進入該回合遊戲。
  • 2022.11.23 v.0.5 調整感應器啟用的程序，並提供更多錯誤訊息；加入快速按鍵的功能，供電腦操作。
  • 2022.11.22 程式發布。
  • 2022.11.20 HTML5 FUN charades 專案新建。 
閱讀全文
By at 沒有留言:
標籤: , , , , , ,

2022年11月19日 星期六

HTML5 : 測試瀏覽器內建的合成語音

2022年11月19日 星期六

目前 HTML5 FUN 網站中的合成語音是使用 Google 的 TTS 合成後，當 MP3 來播放；在思考一個問題，如果哪一天，那個 API 無法使用時，該怎麼辨？之前曾想直接利用瀏覽器內建的合成語音，但是沒有找到相關的資料，才會使用 Google 的 TTS，結果昨天在找為什麼 iOS 上無法使用「devicemotion」的「accelerationIncludingGravity」來抓 iPad 翻轉的座標時，才看到如何使用瀏覽器內建的合成語音範例。這樣一來，合成語音的 Plan B 出現了！

參考底下 MDN 的範例：

將它小修改以後，可以在這個頁面中，輸入想合成語音的文字，然後聽聽利用內建合成語音輸出的聲音。

測試內建的合成語音

在輸入區中輸入一些文字，按 Play 鈕，或是由下拉式選單更換語言後，就可以聽到瀏覽器的合成語音。

速度：
1
1

測試心得

測試完，目前大概有幾個發現 :

  • 在 Window 中的 Chrome 使用「Mircorsoft Anna」的聲音，只有英文可以合成。
  • 如果選的聲音是 Google 的，中文、英文都可以合成。
  • 在 iOS 中，必須是能認得中文字(漢字)的語言才會合成中文字的部份，因此選中文系列的才能正常念出來。
  • 在 FireFox 中，只能合成英文。
  • Android 手機則還要看系統內建了什麼文字轉語音，像我的 Samsung 手機，如果是用預設的 Samsung 文字轉語音，居然也是沒有中文的；幸好它可以自己選用  Google 的，不過得進系統設定中去設定(設定／一般管理／語言及輸入／語音／文字到語音／慣用語音辨識引擎)；設定完，還得將瀏覽器關掉再重開，才能看到 Google 的文字轉語音的語言清單。
  • 系統本身有沒有支援文字轉語音是重點，像我的 iPad 4 (iOS 10.3.4) 就沒有支援，所以在語言清單上，什麼也沒有。

程式編寫重點

MDN 的範例基本上已經很完整了，不過，我想，它可能沒有在 iOS 上測試過，iOS 很多功能都得先跟使用者「互動過」，才能正常運作，包括合成語音也是。

在 iOS 上，想要發出聲音，它必須將 speak 放在「touchend」或是「click」(click 的程序中有 touchend，所以主因還是 touchend)，不然 speak 就不會執行。所以範例中的的 Play 按鈕，改成用 onclick (這樣子沒有觸控的系統也能使用) 來觸發，而不是用原來的「submit」。

另外，輸入的文字如果太長，它會被中斷，然後下一次再呼叫 speak 時，就卡住不動了，所以為了要確保不會發生這樣的情形，在建立新的合成語音之前，可能要先呼叫 .cancel() 來清除之前累積的。

查看原始碼

參考資料
閱讀全文
By at 沒有留言:
標籤: , , , ,

2022年11月18日 星期五

HTML5 : 造句靈感產生器的Blogger及網站嵌入語法產生器

2022年11月18日 星期五

 2014年的「HTML5 : 造句靈感產生器」，2022年11月重新裝修後，有了一些新的功能：

  • 卡片組的題庫除了支援一般文字、圖片，加上了支援國字加直式注音格式語法 (可以用「雄:HTML5:語文高手題庫&國字加注音語法產生器」製作)。
  • 卡片上可以圖片和文字混搭 (2022.11.24新增功能)。
  • 右下角新增一鍵全部翻牌的按鈕。
  • 卡片組會依有多少組，自動排版，題庫可以是一行到六行，自行調配。
  • 行動載具支援直拿的版面。
  • 支援Blogger及網站嵌入，可以使用語法產生器來製作嵌入的語法。

2022年11月版的造句靈感產生器支援國字加注音

使用 HTML5 FUN 的「Blogger及網站嵌入語法產生器」，只要三大步驟即可製作嵌入網頁的 HTML語法，貼入 Blogger 、Google Sites 或網頁中，即可分享使用自製的「HTML5 : 造句靈感產生器」。

請按底下的按鈕，即可打開「Blogger及網站嵌入語法產生器」：

相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2022年11月15日 星期二

Xmind : 線上版匯出為 SVG 圖檔

2022年11月15日 星期二

HTML5 FUN 的工具不少，而目前首頁的選單，並沒有按照分類的方式來排列。之前為了在介紹 HTML5 FUN 的工具時，可以更清楚，利用 Xmind 的線上版，做了一張 SVG 格式的分類圖：


[圖1] PNG 格式的 HTML5 FUN 分類圖
[圖2] SVG 格式的 HTML5 FUN 分類圖


為什麼分類圖不直接輸出為 PNG 圖檔就好？

好問題！ [圖1] 和 [圖2] 貌似一樣，其實大不相同。按底下的連結開啟 SVG 圖檔測試：

因為 SVG 圖檔是向量式的，不但畫質好、檔案小，還可以在圖上加上超連結，而且現在大部份的網頁瀏覽器都可以直接看，不用安裝別的工具，這麼多好處，當然是選擇 SVG 圖檔。

不過這分類圖的連結，是在 HTML5 FUN 首頁右上角的一個小圖示，哈！沒有說，應該很多人都不知道吧！

[圖3] HTML5 FUN 分類圖在右上角

前面說到這個 SVG 圖是使用 Xmind 線上版輸出的，它的網站在：

沒有註冊雖然功能受限制，像無法存檔，就將檔案下載回來，看是存本機，還是儲存在雲端硬碟，要修改時再重新上載到 Xmind 的頁面中即可，反正我也只是要匯出為 SVG 格式的圖檔而已。

結果今天把之前存在本機的 .xmind 檔案上載，並修改後，才發現悲劇了！現在居然沒有下載為 SVG 圖檔的選項了。

[圖4] XMind 匯出 PNG 圖檔

為了解決這個問題，研究了大半天，網站的架構，單機的程式，都一一探了，大概只找出了一些旁門左道。得很多道程序，滿費事的。

晚上準備放棄時，突然靈機一動，想觀察一下，當我們由 Xmind 網站下載 PNG 圖檔時，是否有跟主機做了什麼互動。哈！就這麼找到下載 SVG 檔的方法了。

首先，要先打開瀏覽器的「開發人員工具」，並進入「Network」分頁。準備好後，就可以按照 Xmind 下載 PNG 檔案的程序。按左上角的「三條線」，再按「Download」中的「Image」，出現「Export to PNG」的對話框，就直接按「Export」鈕。

[圖5] 按 Export 匯出圖片

除了會順利的下載到 PNG 圖案；特別注意一下，「開發人員工具」的「Network」分頁中，有關鍵字「SVG」

[圖6] 注意哪裡有 SVG

最下面的那個「SVG」按下去！

[圖7] 按帶有 SVG 的檔案，可以預覽

如同 [圖7] 所示，右側會顯示圖檔的預覽畫面，找到我要的目標了！接著就是準備將它擷取出來。

[圖8] 準備將 SVG 檔案開啟在新頁面

當我們對準類似 [圖8] 中藍底的 SVG 圖形按滑鼠的右鍵時，再按一下選單中的「Open in new tab」後，圖形即會顯示在新的頁面中；接著我們就可以對準新頁面的 SVG 圖形按滑鼠右鍵，並點選「另存新檔」，將 SVG 儲存在本機中了。

下載回來的 SVG 圖形中，除了我們自己畫的圖，Xmind 還會加上浮水印，好的！浮水印的英文是「watermark」，而下載回來的 SVG 檔案是純文字檔，這兩個線索滿好用。

當初會選用 Xmind 來畫分類圖，就是因為它簡單又美觀，最重要的是有 SVG 純文字格式的檔案，我可以利用自己寫的程式，快速地幫每個節點加上遊戲或工具的超連結。今天甚至是直接將 .xmind 檔案解壓縮(對！沒錯，它其實是 ZIP 壓縮格式)，然後可以直接修改裡面名為「content.json」的檔案內容，節點的超連結，只要加一個「href」的參數即可。

哈！久久才用一次，希望 Xmind 不會又換別的手法。

[筆記]

修改流程：

  1. Xmind 網站開啟本機 .xmind 檔案(未加連結者)，並修改內容。
  2. [Download] [Xmind File]
  3. 解壓縮。
  4. 以 xmind_parse.html 貼上 content.json 的內容，加連結，並貼回 content.json 存檔。
  5. 將前面解壓縮的檔案重新打包(目錄內，.xmind 檔案中，結構必須是第一層)。
  6. 將檔名改為 .xmind
  7. 檔案重新以 Xmind 網站開啟，將大小設為 100%；並依本文的方法，下載 SVG 。
  8. 將 SVG 去「water」。
  9. 以 Inkscape 開啟 SVG，版面比例設為 1，大小設為 1500 x 1200
  10. 加上 QRCode 和 Blogger 連結。

相關連結
閱讀全文
By at 沒有留言:
標籤: ,

2022年11月14日 星期一

HTML5 FUN : 國字加注音最佳化

2022年11月14日 星期一

因為是教小學，打從 Flash 時代設計的遊戲及工具，能在國字旁加上直式注音，幾乎是必備的功能。2012 年起，陸續將 Flash 版的工具改為 HTML5 版，哈！如果沒人提到有需求，國字加直式注音的功能就不見得會加到程式中。

最近為了幫 HTML5 版戳戳樂解決英文字串會太長，超過版面的問題，認真的研究了一下 CSS 中，有沒有可以解決的方法。找到了：

word-wrap: break-word;

用這個設定，可以強迫字串只要遇到邊界就換行，不管它是不是單字；這樣一來，就不會遇到像電子信箱地址，或是超長網址時，已經不在畫面範圍了，還不換行。

換行問題解決了，字的尺寸大小要如何找出最佳的數字？國字加注音使用的方法是先算出有多少國字，再利用一個字配一個空格的方式，讓程式去算出較接近的字型大小，並據以計算會有多少行中文字，交給國字加注音的模組去「排字」。哈！試了短句、長文，效果還不錯。

玩出趣味與成就感了，就這樣子，一口氣改了好幾支程式，甚至原來沒有國字加注音功能的，也順便加一下加了！

HTML5 樂透機國字加注音

HTML5 幸運轉盤國字加注音

HTML5 戳戳樂國字加注音

國字加注音的語法，可以使用網站中的這個語法產生器來製作：

例如：

圖片中的動物，英文該怎麼說？

如果以「注音在國字旁」的格式輸出，可以變成：

圖ㄊㄨˊ 片ㄆㄧㄢˋ 中ㄓㄨㄥ 的˙ㄉㄜ 動ㄉㄨㄥˋ 物ㄨˋ ，英ㄧㄥ 文ㄨㄣˊ 該ㄍㄞ 怎ㄗㄣˇ 麼˙ㄇㄜ 說ㄕㄨㄛ ？

如果將它放到戳戳樂的題庫中，就可以呈現出國字加直式注音的樣子：

HTML5 戳戳樂語法與畫面對照

前面說到估算字型大小的方法是以空格「斷字」，讓程式比較容易找到最接近的字形大小，中文字如此，英文字亦是。經過這樣的調整，相信可以讓文字在顯示時，不會出現奇寄怪怪的排列方式。

相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

Python : bytes 轉 string

 在 2019 年底時，曾經針對 Plickers 網站，寫了一個可以利用 .csv 檔，批次匯入題庫的小工具「雄 : Chrome : 擴充功能 : Plickers CSV Import」。很久之前，朋友曾經提到它無法正常運作了，當時初步了解，是因為 Plickers 網站有一些改變，API 呼叫的方式及資料結構略有不同，導致舊的程式無法運作。這兩天有訪客留言，又問到同一個問題，剛好這幾天的研究告一個段落了，於是花了一整個下午，找出了新程序異動的地方，將 Chrome 的擴充功能改好，並上載，等候審核後，即可將 Google 商店中的，更新為 0.6 版。

有趣的是，2019年時，是 Python 版出發，才有 JavaScript 版的；這一回則是顛倒過來，先改好 JavaScript 版，才準備更新 Python 版。

本以為應該不難吧！哈！又耗掉了一個晚上，主要是太久沒有研究 Python，對 Python 3 更是陌生，然後就卡在一個小地方，真的是小小的地方：

  • bytes

  • string

哈！還是 JavaScript 的世界單純！當初在 Python 2.7 時，因為使用了：

s.encode('utf-8')

將字串 s 先轉為 utf-8 ，再來進行字串的比對。

原來在 Python 2.7 中正常的語法，到了 Python 3 卻失效了！後來用 print 將內容顯示，才注意關鍵字「bytes」；原來使用「encode('utf-8')」以後，字串就變成「bytes」型態，而不再是 string 了，難怪比對字串都失敗。

好的！那何解？

就再利用 decode 把它變回字串吧！變成：

s.encode('utf-8').decode()

真是的，就這麼簡單，花了一個多小時在找問題。

總算解決問題，順利地將 GitHub 中的程式也更新了。下回再來研究一下，如何在 Plickers 網站中增加有多媒體素材的題庫。

相關文章
閱讀全文
By at 沒有留言:
標籤: ,

2022年11月7日 星期一

HTML5 : Listening 聽音辨字六選一

2022年11月7日 星期一

「聽音辨字六選一」是 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 聽音辨字六選一的圖示

方法二：使用語法產生器

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


相關連結


更新記錄

  • 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 版。
閱讀全文
By at 沒有留言:
標籤: , ,

2022年11月1日 星期二

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

2022年11月1日 星期二

在 2009年發展「語文高手」是一個可以呈現國字加上直式注音的 Flash 小遊戲，為了方便出題，同年11月有了「雄 : Teaching : 語文高手題庫產生器」，2022年1月曾經將它翻修了一下，詳見「雄:Tools : 國字加注音小工具」。不過，它們都是利用程式去教育部的辭典網站，將要查的字詞，以「爬蟲」的方式，批次將所要的注音「爬」回來的，並不是很有效率，所以在本篇中的工具，有了新的做法。

教育部的辭典網站有提供網站字詞的資料，我將它下載回來，並「瘦身」了一下，資料大小只剩大概 6MB 左右。國字加注音的程式改為由這個字典中來查詢，先由語詞查起，如果沒有找到一模一樣的語詞，就將它一個字、一個字地拆解，用查「字」的方式找。如果找出的結果有多個注音，就標記上紅色，變成按鈕，讓大家按下時，可以自己選擇正確的注音(此功能是以前沒有提供的)。最後再選擇要輸出的「題庫格式」。

目前支援的格式有：

  • 「語文高手」：
    • 形近字題型
    • 同音字題型
    • 多音字題型

  • 非語文高手，國字旁加注音。

  • 「HTML5 Speaking」題型：將所有國字集中，加上「##」以後，再附加所有的注音。

選擇完輸出格式後，就可以按「複製」的按鈕，將輸出的內容，複製到剪貼簿中，供製作 HTML5 FUN 遊戲題庫使用。如果輸出格式是語文高手的三種格式(形近、同音、多音)，在下方會出現複製網站嵌入語法的區塊，可以直接查看並複製網站嵌入的語法，然後在 Blogger、Google Sites，或是其它網站製作自己的語文高手遊戲。

HTML5 FUN 中有很多小工具都可以呈現國字加直式注音的功能，利用這個小工具，相信可以在製作題庫時，有一些幫助。

接下來，您可以捲到最後面觀看示範說明影片，或是直接來試用看看。


語文高手題庫&國字加注音產生器

1.輸入資料

小技巧
語詞的前後加上空格來斷字，可以減少校正
(例如「小鴨子呱呱叫」改用「小 鴨子 呱呱叫」)

語文高手題目

(例如「鐘 鍾,時鐘,鐘錶,鍾情,鍾愛」)

2.校正注音

如果變「紅色」的為多音字，按下後可校正

3.輸出資料

請選擇要輸出的格式後按「複製」鈕

語文高手題庫類型:
形近字  同音字  多音字

非語文高手題庫:
注音在國字旁
Speaking格式(國字注音用##隔開)  

預覽測試

 

2009.10.01 by G.S.Yan (全新版: 2022.11.08 updated)

資料來源：中華民國教育部《國語辭典簡編本》(https://dict.concised.moe.edu.tw/)

說明影片

[影片1] 

示範如何使用語文高手題庫&國字加注音產生器：



相關連結

更新記錄

  • 2022.11.08 改用教育部的《國語辭典簡編本》的資料，並將加上單字注音「變音」的部份；可以使用空格來斷字，增加查詢的一次正確率，以提升效率。
  • 2022.11.02 加入以籃球高手來預覽加注音結果的功能；如果選的輸出格式是語文高手的形近、同音、多音的話，可以複製嵌入網站的語法。
  • 2022.10.31 全新改版。
  • 2022.01.22 PHP 版因為教育部辭典網站查詢方式異動調整。
  • 2009.11.10 PHP 版分享。
閱讀全文
By at 沒有留言:
標籤: , , ,
訂閱： 文章 (Atom)
 
雄::gsyan © 2009. Design by Pocket