六月底提到同事送小孩一套英文書 (詳見:雄:Python: BeautifulSoup 與 querySelectorAll),我將書附的音檔下載,並以 OpenAI Whisper 將音檔轉出字幕檔,接下來就啟動了一個小專案,想要做一個簡易的聽、讀小工具,可以:
- 載入影音檔案播放。
- 載入並顯示字幕檔的內容,按哪一句,就能跳到那一句播放影音。
- 選定語言後,將文字內容進行批次翻譯;並能隨意地隱藏或顯示譯文。
- 播放影音時,可以自訂播放的速度。
- 遇到生難字詞時,可以標記後查字典;或是標記後轉到筆記中。
經過幾天的努力,這個 HTML5 FUN PLAYER 大致完成了;前述的功能,只有最後一項沒做,因為後來在 iPad 上測試時,發現當我們將文字標記好後,iOS 就內建查字典、轉貼到備忘錄或其它工具的功能了,何必再自己「造輪子」。
開啟工具
使用說明
目前 HTML5 FUN PLAYER 除了可以載入本機的 SRT 字幕檔與影音檔案,也可以使用有字幕的 Youtube 影片,只要貼 YouTube 的影片網址,會自動列出可用的字幕語言清單供選取。
[圖1] 加入 YouTube 影片的流程 |
當字幕檔案及影音檔案都載入以後,每一句話的左側會有一個小三角形,按一下三角形,即可跳到該句播放;想暫停,只要按一下字句右側任何一處空白的地方,即可停止播放。
影片示範
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 : 播放下一句。
相關連結
更新記錄
- 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
雄哥好,我有使用您提供的OpenAI-Whisper-語音辨識-製作字幕檔-v2.ipynb 工具,感謝您無私分享那麼好用的工具給我們使用,我也常拿來製作一些英文影片的字幕以學習英文,再加上您分享這TML5 FUN : PLAYER 真是如虎添翼,只是有時如果不在電腦前,只用電視看可能就需要有中文字幕來參照比較,看到您這篇突然在想不知有沒機會整合這裡的功能,提供一個工具讓我們可以簡單的批次把之前很多的英文字幕檔,自動加入繁體中文翻譯然後變雙語字幕呢,如果可以就真的太方便了,再煩請考慮一下是否能幫忙寫一個這樣的工具呢,感恩
回覆刪除Jack 您好,
刪除謝謝您的回饋。您所以謂的「變雙語字幕」,意思是想將在 HTML5 FUN Auodio Player 翻譯完的結果,能以字幕檔的格式下載(匯出)嗎? 如果是的話,這個是計畫中的功能,以後會有匯出的功能選項在畫面中~~
最近忙著跟我家女兒一起製作 ICRT New for Kids 、 NewsBites 跟 VOA Learning English 的字幕檔,好久沒動程式,不過,應該也快了 ^_^
雄哥好,如果有匯出的功能就太好了,另外是目前是針對單一字幕檔有匯入及翻譯的功能,但是如果我有一堆英文字幕,是否有機會用指定資料夾或是ZIP檔的方式,就批次把該資料夾的字幕都匯入翻譯成雙語字幕再匯出呢?這樣可以節省很多逐個匯入然後翻譯再匯出的步驟。你女兒有個那麼會寫程式的爸爸可以幫忙製作那麼多學習工具,想必是學得很開心,我們也跟著受惠,真是太好了,祝福您們全家每天都充滿幸福與健康..^_^
刪除Jack 您好, 您再提的這功能就超出這個工具的應用範圍了;這個工具使用的是純 HTML5 ,並無法指定資料夾或是進行解壓縮哦!
刪除如果要的只是將字幕翻譯,其實網上路應該有很多高手寫好現成的囉~~ 到 github 中用關鍵字找一下,一定有的。
雄哥好,可能是我不太知道要怎麼找到適合的工具,找了蠻久的,還是找不到我要的功能,如果您有剛好知道哪個工具可以有這樣的功能再麻煩推薦給我,還是很感謝您的幫忙!!
刪除雄哥好,我後來有找到適合的工具,也分享給有需要的朋友,謝謝您的協助!! https://github.com/1c7/Translate-Subtitle-File?tab=readme-ov-file
刪除Jack 您好,
刪除是嘛~ 是嘛~~ 我就知道您可以的 ^_^
依您的需求, 個人是會抓兩個關鍵字去找: subtitle translate
應該會多到不知道選哪一個,但真的是「如人飲水,冷暖自知。」,哪個工具好用? 自己用起來順手比較重要。