HTML5 FUN : PLAYER 增強聽讀能力的小工具

六月底提到同事送小孩一套英文書 (詳見:雄:Python: BeautifulSoup 與 querySelectorAll)，我將書附的音檔下載，並以 OpenAI Whisper 將音檔轉出字幕檔，接下來就啟動了一個小專案，想要做一個簡易的聽、讀小工具，可以：

• 載入影音檔案播放。
• 載入並顯示字幕檔的內容，按哪一句，就能跳到那一句播放影音。
• 選定語言後，將文字內容進行批次翻譯；並能隨意地隱藏或顯示譯文。
• 播放影音時，可以自訂播放的速度。
• 遇到生難字詞時，可以標記後查字典；或是標記後轉到筆記中。

經過幾天的努力，這個 HTML5 FUN PLAYER 大致完成了；前述的功能，只有最後一項沒做，因為後來在 iPad 上測試時，發現當我們將文字標記好後，iOS 就內建查字典、轉貼到備忘錄或其它工具的功能了，何必再自己「造輪子」。

開啟工具

使用說明

目前 HTML5 FUN PLAYER 除了可以載入本機的 SRT 字幕檔與影音檔案，也可以使用有字幕的 Youtube 影片，只要貼 YouTube 的影片網址，會自動列出可用的字幕語言清單供選取。

[圖1] 加入 YouTube 影片的流程

當字幕檔案及影音檔案都載入以後，每一句話的左側會有一個小三角形，按一下三角形，即可跳到該句播放；想暫停，只要按一下字句右側任何一處空白的地方，即可停止播放。

影片示範

• https://www.youtube.com/watch?v=QMyr_o8Ul7Y

Q & A

• Q: 字幕檔可以使用什麼格式的？
• A : 目前使用的字幕檔是 SRT 格式。
• Q: 影音檔支援哪些格式？
• A : 目前支援的影音格式有 .mp3 .mp4 .mkv .mov .avi .webm
• Q: 新增媒材時，字幕檔跟影音檔可以一起選取或拖曳嗎？
• A: 可以的，選取檔案與拖曳檔案都有支援多檔案，但是注意，只能一個影音檔，一個字幕檔，不然只會使用最後一個同類型的檔案。
• Q: 只有音檔或是影片檔，如何自製字幕檔？
• A: 請參考文末的相關連結，可以使用 OpenAI Whisper 或是 Faster Whisper 來自製字幕檔。
• Q : Youtube 的影片沒有字幕檔，可以自製嗎？
• A: 可以的，請參考文末的相關連結，可以使用 OpenAI Whisper 或是 Faster Whisper 來自製字幕檔。
• Q: 翻譯是使用哪一個工具產生的？
• A: 本工具是使用 Microsoft 的 Bing 翻譯來完成批次翻譯的工作。
• Q : 可以自動載入影音嗎？
• A: 如果在本工具的網址後上加上「 ?v=影音的網址 」 ，這樣子在程式啟動時，即可自動開啟該網址；另一個方法是將影音的網址加在字幕檔裡面，載入字幕檔案以後，會順便載入影音。
• Q : 在電腦上播放影音有快速按鍵嗎？
• A: 在電腦中操作，除了用滑鼠，也可以使用鍵盤的按鍵
• Esc : 播放 / 暫停。
• F1 : 重播該句，播上一句(連按兩次)。
• F2 : 播放下一句。

相關連結

• 雄:以 ICRT & VOA Learning English 提升英文能力

• 雄:Chrome : 擴充功能 : ICRT Episodes Timestamp

• 雄:Chrome : 擴充功能 : VOA Learning English Timestamp

• 雄:Python: BeautifulSoup 與 querySelectorAll

• 雄:HTML5 FUN 精選集

• HTML5 FUN

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

• 雄 : 使用 OpenAI Whisper 製作影音的字幕或逐字稿

• 雄 : 以 Faster Whisper 將影音辨識為字幕或逐字稿
• 雄 : oTranscribe 線上聽打逐字稿改良版 

更新記錄

• 2024.10.17 翻譯的文字改達到800字就送出資料，以免超過 1000 字的上限；如果翻譯的結果和原句相同(例如中文翻譯中文)，就隠藏內容，以免重覆出現；可以將字幕檔案直接拖曳到內容顯示的區塊，簡化載入的程續；播放的控制支援搖桿，功能扭與 ICRT / VOA Learning English Chrome 擴充功能類似，但左側按鈕的下，改為控制第一翻譯文字的顯示與隱藏。
• 2024.10.05 網址的 f  參數如果帶有 Tab , 表示為由試算表中指定的工作表載入載入指定列中的字幕資料(存放在D欄)。
• 2024.10.04 字幕內容如果有中英混合時，使用自動偵測語言會偵測錯誤，改以第一次偵測到的語言來進行後續的翻譯，所以要在最前面放主要的語言。
• 2024.08.11 網址中可使用 f 參數來指定由 Google Drive 中載入字幕文字檔(上載前,檔名必須先改為 .txt , Google Drive 才會視為文字檔)；新增一個「匯出字幕」的按鈕，按下後，可將看得到的文字(已隱藏的翻譯就會除外) 匯出為 SRT 格式的字幕檔。
• 2024.08.04 解決字幕檔最後一行文字抓不到的問題(解析前，在最後加上一個換行字元)。
• 2024.08.03  解決按 Esc 鍵不會標示正在念哪一句的問題。
• 2024.07.26 如果字幕檔中帶有影音的網址，字幕載入完畢會自動載入該影音；修正顯示/隱藏翻譯時，內容無法保持於正在看的那一段，需要手動捲回定點的問題。
• 2024.07.25 可使用鍵盤的 Esc 控制播放/暫停、F1 回播/跳到前一句、F2 跳到下一句；調整速度的區塊新增跳到前一句、跳到下一句的按鈕；在網址中加入 v=xxx ，xxx 可以是 YouTube 的影片代碼，或是影片網址，即可自動載入該影音。
• 2024.07.24 YouTube 的影片如果有一個以上的字幕，可以選用第二字幕。
• 2024.07.22 播放鈕及翻譯加上圓形進度狀態顯示；無法翻譯時，顯示警示的訊息；YT輸入區如果是其它影音的網址，會試著加入播放；只有影音無字幕時，亦可顯示播放進度；影音播放完會改變播放鈕的狀態；速度改變控制區塊可自改拖曳換位置；影片觀看區域如果超出邊框，會自動修正位置。
• 2024.07.15 新增查字典的按鈕，將要查詢的文字反白以後，按下想使用的字典，即可前往該字典的頁面。
• 2024.07.14 影片支援顯示第一個翻譯的字幕，按一下邊框可以放大/縮小，拖曳邊框可以移動位置。
• 2024.07.01 初稿

HTML5 FUN::PLAYER

速度:  0.5

2

0%

X

加入/更換 媒材...

將檔案拖曳進來
或按這裡加入
SRT字幕檔、聲音檔或影片檔

按這裡加入Youtube影片

X

輸入 YouTube 影片網址： >>套用範例

2024.07.01.v.1e by gsyan