2024年11月23日 星期六

以 OpenAI Whisper 轉語音備忘錄為字幕格式逐字稿

2024年11月23日 星期六
有老師問到,平常都用 iPhone 在錄音,也可以使用 OpenAI Whisper 來將錄音轉為逐字稿嗎?

使用我建構在 Google Colab 中的 OpenAI Whisper (或 Faster Whisper) ,只要有網頁瀏覽器,基本上就可以使用。它們的聲音來源接受影音網站公開分享的網址,也可用電腦或是裝置中的影音檔案。所以手機使用 OpenAI Whisper 來將錄音轉為逐字稿的關鍵,是將錄音工具中的語音儲存為檔案。

語音備忘錄儲存到檔案

以 iOS 中內鍵的錄音工具「語音備忘錄」來說,錄好的語音怎麼變成可上載的檔案?

  • 開啟「語音備忘錄」
  • 在錄音清單中,按一下想儲存的錄音。
  • 按一下標題右側「三個點點」「更多」的圖示(或是「分享」的圖示)。
  • 點選「儲存到檔案」(看不到就向下找找)。
  • 指定想儲存到哪個地方及檔案名稱。
  • 按「儲存」。

[圖1] iOS語音備忘錄儲存到檔案

那可以將錄音儲存到雲端硬碟中嗎?

當然沒問題,想儲存到哪個地方完全自己決定就好。

有了語音檔案了,接下來,就跟在電腦上操作 Colab 裡的 OpenAI Whisper 類似步驟。

OpenAI Whisper 轉語音備忘錄為逐字稿

經過前面的程序,將轉語音備忘錄儲存為檔案以後,我們就可以開啟 OpenAI Whisper 了。有兩個選擇,可以使用 OpenAI Whisper,或是 Faster Whisper,如果尚未使用過,可以先在電腦上,參考底下兩篇舊文,裡面有操作示範的影片:

如果想直接使用 Whisper ,就用底下的連結來開啟工具:

小技巧:

  • 上載音檔:
    在手機上,因為是直拿的版面,先按畫面左上角的「三條線」圖示,再按「顯示檔案瀏覽器」。這樣就可以看到「虛擬機」的檔案及目錄了(有時可能要稍等一下,等虛擬機啟動連線,請參考 [圖2] [圖3] 或示範影片)。
  • 格式選擇:
    2024.11.21 以後,格式的選項中,新增了「.srt.txt」的項目。它會輸出帶有時間的字幕格式逐字稿,但是因為檔名結尾為「.srt.txt」,在手機或是平板中會被視為純文字檔案,就可以直接開啟來查看內容。(請參考 [圖4])
  • 自動鎖定:
    手機、平板有省電的機置,可能會因為「自動鎖定」進看省電模式而自動關閉螢幕,導致 Whisper 的程序被中斷;所以在行動裝置在使用 Whisper,iOS 可能要暫時在「設定」「螢幕顯示與亮度」中,將「自動鎖定」關閉。建議如果時間較長的錄音檔,將錄音錄儲存到雲端硬碟,再使用電腦來轉逐字稿較理想。
在手機中上傳音檔的程序如 [圖2] 所示:
[圖2] 在手機中上傳音檔

上傳好音檔後,按一下檔名,再按一下右側的「三個點點」,出現選單就按「複製路徑」。
[圖3] 複製音檔的路徑
將音檔的路徑貼入 url 的欄位中,將格式設定為 .srt.txt ,其它選項則依需求自行設定,都設定完就按左上角的「播放」圖示來開始執行程序 [圖4]  :
[圖4] 設定 & 執行

完成後記得參考 [圖5] ,進行中斷連線並刪除程執行程序的動作:
[圖5] 中斷連線並刪除程執行程序

示範影片

  • 錄製中

相關連結


2024年11月10日 星期日

開發 yt-dlp 應用的好幫手 cli_to_api.py

2024年11月10日 星期日

無論是 youtube-dl 或是後繼的分支 yt-dlp 都是用來下載網站影音的好工具,各大知名的影音網站都支援,真的是「超級強」,唯一的缺點它是屬於命令列的工具(對不畏懼指令的人,反而更能把 yt-dlp 的特色完全發揮)。如果不想面對指令,我也弄了一個只要填填資料就能用的,放在這篇文章中,可以試試看:

上面這個小工具是在 Google Colab 的虛薿機以 Python 來處理表單資料,再使用 yt-dlp 的模組來執行影音下載及後續的處理,

關於 yt-dlp 在下指令時,可用的功能選項語法,可以參考官方的說明:

模組中的應用方式可以參考 yt-dlp 的官方說明:

一開始,我以為就是將命令模式用的參數套到模組中就好了,很簡單嘛!哈~真的是太單純了!yt-dlp 的參數包羅萬向,有的參數是用在前端,有的參數是用在後端;同一個功能,名稱及所屬的階層亦不同。感覺直接下指令好像單純一點。

例如,下載影片後,只想儲存 mp3 聲音檔(如果使用預設工具,它是在最後時以 FFmpeg 來進行轉檔),在命令列中使用的是這樣的參數:

--extract-audio --audio-format mp3

但是在 Python 中使用 yt_dlp 模組時,最少必須在設定中使用:

'postprocessors': [{
    'key': 'FFmpegExtractAudio',
    'preferredcodec': 'mp3',
}]

哈!當初為了這個卡關很久,因為一開始,要嘛去搜尋別人的討論或心得;不然就是直接追 yt-dlp 的原始碼。有收穫,但是花了很多時間。

重點來了!昨天在這個網頁中找到了寶:

裡面提到了有一個名為「cli_to_api.py」的工具:

我們只要將在下 yd-dlp 命令時用的參數給 cli_to_api.py ,它就會提供轉換的建議,可以輕鬆地應用在 Python 中。例如,我輸入:

python cli_to_api.py --extract-audio --audio-format mp3

它就給我這樣的內容:

The arguments passed translate to:

{'final_ext': 'mp3',
 'format': 'bestaudio/best',
 'postprocessors': [{'key': 'FFmpegExtractAudio',
                     'nopostoverwrites': False,
                     'preferredcodec': 'mp3',
                     'preferredquality': '5'}]}

Combining these with the CLI defaults gives:

{'extract_flat': 'discard_in_playlist',
 'final_ext': 'mp3',
 'format': 'bestaudio/best',
 'fragment_retries': 10,
 'ignoreerrors': 'only_download',
 'postprocessors': [{'key': 'FFmpegExtractAudio',
                     'nopostoverwrites': False,
                     'preferredcodec': 'mp3',
                     'preferredquality': '5'},
                    {'key': 'FFmpegConcat',
                     'only_multi_video': True,
                     'when': 'playlist'}],
 'retries': 10}

真的是太令人感動了!愛死開源的社群了,讓人功力馬上大增!

另一個例子,如果想讓 yt-dlp 可以將有分章節的 YouTube 影片,下載後一個章節儲存一個檔案,命令列可以使用這個參數:

--split-chapters

使用  cli_to_api.py 來轉換一下:

The arguments passed translate to:

{'postprocessors': [{'force_keyframes': False, 'key': 'FFmpegSplitChapters'}]}

Combining these with the CLI defaults gives:

{'extract_flat': 'discard_in_playlist',
 'fragment_retries': 10,
 'ignoreerrors': 'only_download',
 'postprocessors': [{'force_keyframes': False, 'key': 'FFmpegSplitChapters'},
                    {'key': 'FFmpegConcat',
                     'only_multi_video': True,
                     'when': 'playlist'}],
 'retries': 10}

關鍵的設定是:

{'postprocessors': [{'force_keyframes': False, 'key': 'FFmpegSplitChapters'}]}

真是要命!害我鬼打牆,一直以為用「'split_chapters': True」,然後下指令明明成功了,在 Python 中,就是沒效果。

另外,以 chapters 儲存為什麼檔名的語法,順便筆記一下,命令列的參數:

-o "chapter:%(title)s-%(section_number)02d-%(section_title)s.%(ext)s"

用在 embedding 時:

'outtmpl': {'chapter': '%(title)s-%(section_number)02d-%(section_title)s.%(ext)s'}

怕檔名有用到特列的字,保險一點,還可以再加上 --windows-filenames 參數:

'windowsfilenames': True

有了  cli_to_api.py 這個小工具,真的是幫了大大的忙,讓人可以更體驗到 yt-dlp 這工具的強大。

相關連結


2024年11月9日 星期六

如何提升自己的英文聽力筆記

2024年11月9日 星期六

早上看了 VOA Learning English 2024-11-08 的這則 "Practice Your Listening" :

這一篇聚焦在如何提升自己的英文聽力,提供了一些建議,值得一看。

我聽了兩遍,也製作好字幕格式的版本,可以按底下的連結,用 HTML5 FUN Audio Player 來聽:

偷懶,將字幕貼給 Google NotebookLM ,請它整理出有效地練習英文聽力的重點:

根據本文,您可以透過以下幾種方式有效地練習英文聽力:

  • 選擇略高於您目前程度的聽力材料。 這樣可以幫助您學習新單字,但又不會太難理解。 最好選擇有字幕或文字稿的英文材料,例如 VOA Learning English 文章,以便核對您的理解。
  • 測試自己。 
    • 首先,試著在不看文字的情況下聆聽部分音訊。 記下主要思想和您清楚理解的部分。 
    • 然後,再次聆聽,試著理解更多細節。 這個時候您可以做一些較短的重複練習。 
    • 最後,您可以一邊閱讀文字稿一邊再次聆聽音訊,檢查自己的理解程度。
  • 逐字抄寫。 這被稱為「聽寫」,是最有效的聽力練習方法之一。 即使只有短短一分鐘的音訊範例,您也可以透過這種方法學到很多英文。 例如,如果您正在聽寫一段訪談,您可能會注意到口語英文和書面英文之間的差異。 透過聽寫,您可以注意到並學習新的表達方式、文法規則和拼寫。 這種方法還可以幫助您在閱讀新單字時將其記住。 這是因為您正在尋找您已經嘗試透過聆聽解決的問題的答案。
  • 其他技巧:
    • 嘗試聆聽不同語速的英文。 隨著時間的推移,您就可以跟上更快語速的口語英文。 許多線上影片都允許您調整播放速度。
    • 練習聆聽不同外國口音的英文。 這是一項非常有用的技能,因為世界各地都有許多人說英文。
    • 將您的聆聽重點放在特定的發音或文法點上。 例如,英文介系詞的使用可能很困難。 試著聆聽介系詞以及它們所連接的單字。 這可以幫助您在口語和寫作中正確使用它們。

請記住,就像任何技能一樣,您可以透過經常練習和制定詳細的學習計畫來提高聽力能力。

這一陣子把聽 VOA Learning English 及 ICRT News Lauchbox,並製作字幕檔當功課在做,聽力有沒有進步?這幾天發現有吔!不斷地練習還是有差的。不過今天的 "Ask a Teacher" 中建議要聽三遍,哈!我大部份都只聽了兩遍,以後挑自己有興趣的文章,再加強一下。另外文中建議:

It is best to listen to English material that has words written either in captions or in the body text, such as a VOA Learning English article.

哈!這不就正是我花時間製作「雄:以 ICRT & VOA Learning English 提升英文能力」的目的。

相關連結

2024年11月1日 星期五

人臉偵測:使用 deface 遮蔽照片或影片中的人臉

2024年11月1日 星期五

有沒有自動將照片或是影片中的人臉打馬賽克的工具?現在人臉偵測的技術已經很成熟,甚至都可以辨識誰是誰了!

以前玩過 Python + OpenCV 進行辨識,這幾天又開始研究人臉偵測。找資料時玩到 ORB-HD 的 deface 。它可以在影片或是照片中,找出所有人臉,後續可以在人臉上進行模糊處理、抹成黑色的、以圖片覆蓋,或是加上馬賽克。原始碼在 GitHub 中:

下面是以 deface 將所有人臉以小熊圖示覆蓋的結果:

[圖1] deface 以圖示遮蔽人臉的結果

個人滿欣賞 deface 的簡潔,要說缺點的話,應該是想使用必須有 Python 的環境,而且是用打指令的方式來操作。

為了方便使用,可以開啟我在 Google Colab 中建立好的程序檔,會自動安裝,也不用打指令。準備好照片並上載,填表單、設定參數即可執行。

工具的網址

工具的網址如下:

如何使用 deface

打開前述的網址以後,透過以下幾個步驟來完成遮蔽人臉:

  1. 上載照片。
  2. 複製照片在上載空間中的路徑。
  3. 填入照片在工具中的檔案路徑。
  4. 設定其它選項。
  5. 啟動並執行程序指令。

詳細的操作說明可以觀看以下影片:

註:影片有字幕

更新記錄

  • 2024-10-31 建立 Google Colab 筆記本



2024年10月27日 星期日

English is just a tool to play around with to get a result

2024年10月27日 星期日

晚上看了這部 2017年的 TEDx Talks :

如果想要中英文字幕對語對照,可以用 HTML5 FUN Auidio Player 來開啟影片:

第一個感覺是讓我好像回到高中的英文課堂,講者和我的英文老師一樣,很用心,用的語彙都佷淺顯,我居然不用看翻譯就能聽懂大部份的內容。

再來就是講者傳達了一個很重要的概念:

It's (English) just a tool to play around with to get a result.

結尾又再度強調一次

English today is not an art to be mastered,
it's just a tool to use to get a result.
And that tool belongs to you.

很多人在學校學英文很痛苦,因為大家都在計較文法對不對,大小寫有沒有錯......,可能因為一個地方錯就拿不到分數,讓大家對英文一點信心都沒有,更遑論鼓起勇氣開口用英文和別人溝通。記得二十多年前和同事兩個人去新加坡住青年旅館,與外國人聊天的經驗,只要能說出關鍵的語彙,基本上也是聊得起來的,所以開口說就對了!

相關連結


2024年10月26日 星期六

OpneAI Whisper 有沒有使用 initial prompt 有差別

2024年10月26日 星期六

OpenAI Whisper 中有一個名稱為 initial_prompt 的參數,之前只有在使用 large-v3 的模型,因為會將中文語音解譯為簡體中文,才會使用到它,將 initial_prompt 設為「以下是繁體中文的句子」,最後輸出的文字就不會是簡體字了。

今天在 Faster Whisper 使用 large-v2 的模型來輸出 ICRT BreakDown 中的這一集 Podcast

Faster Whisper 偵測為「en」,解譯出英文,基本上是沒問題,來賓前面講的中文卻變成英文了。

可以按底下的連結,用 HTML5 FUN Audio Player 來看看輸出的字幕內容:

所以我設定了 OpenAI Whisper 的 initial_prompt 參數為:

these sentences mixed with English and traditional Chinese

[圖1] 有設定  initial_prompt 參數

如 [圖1] 設定好  initial_prompt ,重新讓 Whisper 再將音檔輸出為字幕檔,中文字的部份就較正常了。

可以按底下的連結,用 HTML5 FUN Audio Player 來看看有告訴 Whisper 語音是中英混合後,輸出的字幕內容:

重新輸出的字幕,講中文的部份大多正常輸出了;不過,不知道為什麼中間有一段 Whisper 又「昏頭」講英文。

比較起來,如果英文和中文混雜的情況下,還是需要使用 initial_prompt 的參數,明確地告訴 Open AI Whisper 。哈!請它認真一點,好好地分辨英文和中文!

此外, initial_prompt 參數還有一個很好用的功能,像我的影片中會說到「HTML5 FUN」跟閩南語的「好康A逗相報」,如果將它們加到  initial_prompt 設定中(以逗號分隔不同語詞),它就比較能辨識正確。所以可以應用在一些專有名詞,或是姓名上。

例如我在「雄:JavaScript : 擷取 Google 日曆製作簡明行事曆」中,介紹如何 Google 日曆輸出為簡明行事曆的影片中,「HTML5 FUN」、「好康A逗相報」、「簡明行事曆」,Whisper 都辨識錯誤 ,如果將它們都加到  initial_prompt 中,就可以提高正確率了。[圖2] 是有沒有使用 initial prompt 的比較:

[圖2] 有沒有使用 initial prompt 的比較

順便看一下,如何知道自己帳號還能使用 Google Colab GPU 的時間剩下多久?

參考 [圖1] ,如果程式正在執行的狀態,按右側綠色小箭頭所指的「三角形」,打開選單後,可以點選裡面的「查看資源」,在「資源」的分頁中會顯示可使用的剩餘時間(類似綠色箭頭所指之處)。

像我這個帳號,今天就把近四個小時的可用時間,用到剩下 40 分鐘了。哈!早知道在修改程式時,就先點選一下「中斷連線並刪除執行階段」,讓虛擬機空等,白浪費了許多時間;沒關係,明天又可以「滿血」了。

相關連結


2024年10月16日 星期三

YouTube 語言設定對 NotebookLM 的影響

2024年10月16日 星期三

Google NotebookLM (https://notebooklm.google.com/)有人稱它為第二個大腦,之前測試,只要是公開發布超過24小時的 YouTube 影片,而且帶有字幕者(其它限制參考 NotebookLM 的說明),就可以當 NotebookLM 的來源,讓它分析字幕的內容。昨天朋友發現原來可以匯入字幕的 YouTube 影片,變成無法匯入了,試了一下,真的不行了吔!哈!有變化,表示它還在持續進化中,也該高興的。

早上用各種方式交叉比對,發現解決自己影片無法匯入到 NotebookLM 的方法,也發現原本沒有字幕的 YouTube 影片,其實 NotebookLM 會自動產生逐字稿哦!(圖1)

[圖1] NotebookLM 自動產生的 YouTube 影片逐字稿

測試的影片如下:

以我自己的影片來說,「影片語言」平時都是使用預設的「中文(台灣)」,所以字幕的語言也是使用這個設定。測試完的結果,它應該就是造成我的影片 NotebookLM 不接受的主因。如果將語言「中文(台灣)」中的字幕「取消發布」,讓影片變成沒有字幕的狀態,它就能類似 [圖1],自動生成逐字稿。

如果想使用自己上載的字幕內容,就要有一個語言為「中文」的字幕,再重新將字幕上載到YouTube 「中文」的項目中。

[圖2] 語言為「中文」者可以抓到字幕「中文(台灣)」抓不到

到 NotebookLM 加入影片,就能底下 [圖3] 一樣,看到 YouTube 影片的字幕內容了。

[圖3] 抓到的字幕內容

個人是覺得「中文(台灣)」抓不到字幕這個狀況應該只是一時的臭蟲吧 (哈!語言設定的清單裡,中文的選項真多,有繁體、簡體、台灣、客語、香港......),多半是程式改一改,疏忽了,沒有去參照到「影片語言」的設定。有了這個經驗,以後我的 YouTube 影片的語言一律設定為「中文」就好了。

不過,以我同一支影片來比較,NotebookLM 產出的逐字稿(圖1),跟用 OpenAI Whisper 解譯出來的字幕(圖3),還是有差距的。

[註] 

  • Q:
    如果 YouTube 影片是別人的,明明影片有提供字幕,卻發生字幕無法匯入的情形,怎麼辦?
  • A:
    在 YouTube 開啟影片,展開影片下方的詳細資料,裡面應該會有「字幕記錄」,按一下「顯示轉錄稿」的按鈕,在畫面右上角就會出現「字幕記錄」的區塊,將裡面的文字內容選取後,按鍵盤的 Ctrl + C (Command + C) 即可複製。然後在 NotebookLM 中的來源選擇「貼文文字」的「複製的文字」。
    另一個方式,使用 HTML5 FUN Audio Player,它可以載入 YouTube 影片及其字幕,然後可以下載字幕,再上載到 NotebookLM。

相關連結



    2024年10月12日 星期六

    Life : 貪玩的老爸

    2024年10月12日 星期六

    之前小孩說有做酒瓶燈的課程,需要一個酒瓶;哈!這可難倒我了,家裡根本不喝酒的(雖然桌上有好幾瓶別人送的紅酒)。老師似乎又設定了一些條件,這個不能,那個不行的。我心想,啊~DIY 不是應該教學生盡量發揮創造力,能想到辦法解決問題才是最重要的事。最後我們決定將家裡快用完的醬油倒到別的容器,把醬油瓶洗乾淨,晾乾後拿去學校用。

    拿出我買很久,還沒用的 LED 燈串試了一下,待解決的大概就是瓶口稍大了一點,燈串「瓶塞」的部份可能因為太小而掉入瓶中。基本上,如果老師對這「醬油瓶」沒意見,瓶口太大的問題有太多方法可以解決了。

    2024-11-18 作品補拍

    昨天小孩很興奮的聊到去教室上課,看到了 3D printer,有 Delta 型的 3D printer,有 SLA 光固化 3D printer,還有雷切機 ..... 等等,她雖然說不出名稱,但是描述完外型、特徵,我就幫忙補充說明。

    哈!後來跟她說,其實我覺得看到這些東西,照說應該不會比別人興奮才對;因為除了光固化的機器家裡沒有,其它的,明明從小就在家裡看過、玩過了。他老爸就是一個貪玩好玩的人,什麼東西都比周圍的人玩得早,然後當別人開始熱熱鬧鬧地敲鑼打鼓,反而不玩,因為又去玩別的了。

    回想當初去現在已拆除,變成大馬路的中華商場,買貴貴的 i386-20 電腦,到後來買 ISA 的網路卡,在家用兩部電腦玩 NOS,體驗網路;玩 Slackware Linux;玩 FreeBSD (2.x 版玩不夠,還跑去懷寧街的巨擘書局買最新的 3.x 版安裝光碟) ;架設各種 Internet 的服務...... ,到後來的 Wiimote 電子白板、Arduino、Raspberry Pi、3D printer、雷雕。學校網站中的資料不復見了,剩下的部份痕跡可以在 Blogger DIY 的標籤中找到。

    雖然大學無法如願地去念工程相關的科系、當工程師,喜歡動手做的 DNA 還是存在的。許多不熟的人,只聽過我會寫程式,寫一些小工具,哈!其實 DIY 的部份是我更大的興趣,基本上,我就是一個貪玩的老爸 ^.^


    2024年10月10日 星期四

    試算表 : 將多欄資料合併為一欄

    2024年10月10日 星期四

    給自己出了一個每天要做旳功課,聽 ICRT 「News for Kids」、「News Bites」跟 VOA Learning English,並且利用 「ICRT Episodes Timestamp」及「VOA Learning English Timestamp」兩個Chrome 擴充功能幫網站的文本加上時間戳記,最後再匯出為 SRT 字幕檔,匯整到「雄:以 ICRT & VOA Learning English 提升英文能力」中。

    原本所有的 SRT 字幕檔案是儲存到 Google Drive 中,再以我研究的一個程序讓 Blogger 中的程式可以擷取到字幕的內容,不過,這個方式有一個小缺點,因為必須透過別人的網站來突破 CORS 的限制,速度不穩定,有時甚至就卡住而擷取不到字幕檔。哈!程式如果這麼不穩定,實在有一點丟自己的臉;沒關係,山人自有妙計!

    查了一下,Google 試算表的儲存格,一格最多可以儲存 50,000 個字元,而我的字幕檔內容,基本上不會超過這個大小;於是寫了一個程式,將原來已製作好的字幕檔,通通塞到試算表中的儲存格中,一則一格 (圖1),這個方式在沒有調整列高之前,很可怕!想跳到最後一列要找半天。

    [圖1] 儲存在試算表中的字幕內容

    為什麼要將字幕檔的內容改以試算表來儲存呢?

    主要是去年開發 HTML5 FUN 烘焙機的自製遊戲啟動器及今年六月的「HTML5 FUN:PARTDLE 兜一兜」中,都是使用 Google 試算表來當作資料庫,而且已經有一個算成熟的程序;最大的好處是完全不用再透過別人的網站來擷取資料,只要 Google 試算表沒問題,使用 JSONP 來直接讀取資料的速度相當理想 (如果使用 Google Apps Script 也是會稍等一下才能接收到資料)。

    另外,原來字幕選單的更新,是修改 Blogger 的 HTML 語法,還得將資料剪剪貼貼的,現在通通在一個試算表中完成,管理上較簡便。

    看一下試算表儲存選單的工作表內容:

    選單工作表中用了四個欄位,除了第一列記錄了 NewsForKids、NewsBites、EzNews、VOA 四個標題(其實是另外四個工作表的名稱),其它儲存格中都是放公式 (圖2)。

    [圖2] menu工作表中的內容

    每一欄代表一種字幕的選單:

    • A 欄放的是 ICRT News for Kids (使用工作表 NewsForKids)。
    • B 欄放的是 ICRT News Bites (使用工作表 NewsBites)。
    • C 欄放的是 ICRT EZ News (使用工作表 EzNews)。
    • D 欄放的是 VOA Learning English (使用工作表 VOA)。

    選單的資料是將相關工作表中的 A 欄(ID)、 B 欄(日期) 及 C 欄(標題),三欄合為一欄,自動產生的。來看看使用了什麼試看表內建的公式,以 [圖2] 的那一筆為例:

    =byrow(INDIRECT("NewsForKids!A2:C"), lambda(row, textjoin(char(9), true, row)))

    • byrow : 一列列抓取第一個參數指定範圍的資料,並傳給第二個參數的函數去處理。
    • INDIRECT("NewsForKids!A2:C") : 以文字的方式來指定資料的範圍。為什麼不直接使用「NewsForKids!A2:C」,而要用「INDIRECT」?主要是實作時,發現如果在字幕資料的工作表最前面插入一列後,「NewsForKids!A2:C」會因為多了一列而被更動,這樣子會天下大亂,所以只好改用 INDIRECT("NewsForKids!A2:C") 來設定範圍。
    • lambda : 將接收到的資料以第一個參數來命名,並讓第二個參數的自訂函數來使用。
    • textjoin(char(9), true, row)) : 將收到的資料合成一個字串。第一個參數為不同資料間的連接符號(本例使用「char(9)」,也就是跳格符號 TAB);第二個參數為 true,所以會跳過沒有內容的部份;第三個參數為傳來的資料(本例就是 NewsForKids 工作表中的內容)。
    在選單工作表 (menu 工作表) 的第二列中都是放類似前面的公式,公式展開後,就能得到像 [圖2] 的內容了;這樣子每次新增字幕資料後,它都能自動產生選單所需要的資料,滿方便的。

    那在「雄:以 ICRT & VOA Learning English 提升英文能力」中,要怎麼製作選單?

    [圖3] 在 Blogger 中的選單畫面

    以前面 NewsForKids 的 A2 儲存格的內容為例:

    8ca0381f 2024-10-10 Happy Double Ten Day

    這個例子中雖然看起來是一個字串,仔細觀察一下,「8ca0381f」、「2024-10-10」與「Happy Double Ten Day」是不是看起來好像有空格,其實它跳格符號(TAB),而不是一般的空格。有了這個 TAB 符號,就可以將一個字串再分解為三個製作選單時,所需要的欄位了。

    第二、三欄位是選單中會出現的文字,第一個欄位則是用來到試算表中找字幕資料的識別碼。可以試算表中有好幾個工作表,怎麼知道本例中的「8ca0381f」是在哪一個工作?前面提過,在 menu 工作表中的 A1 那格裡,放的其實就是工作表的名稱,所以在 A 欄中的所有識別碼,都應該要去 A1 中指定的工作表去搜尋。哈!這樣是不是很完美(自己說的)。

    以上純粹是記錄給日後失憶的自己參考用,東西玩太多了,似乎會愈來愈將玩過的遺失在腦袋的某個小角落,然後找不著,記錄下來還是比較保險。

    相關連結


    2024年10月2日 星期三

    Chrome : 擴充功能 : ICRT Episodes Timestamp

    2024年10月2日 星期三

    之前陸續利用 oTranscribe 將 ICRT 的「News for Kids」、「News Bites」及「EZ News」三個單元中的全文,一一加上時間戳記,並匯出為字幕檔,再搭上 HTML5 FUN 的 Audio Player,變成英文學習的資源,成果都匯集在「雄:以 ICRT & VOA Learning English 提升英文能力」。

    上週發布了一個 Chrome 擴充功能稱為「VOA Learning English Timestamp」,在 Chrome 瀏覽器中安裝這個擴充功能以後,進入 VOA Learning English 網站,並開啟「LESSONS OF THE DAY」的文章後,即可使用擴充功能,邊聽邊幫段落加上時間戳記。

    以前面的擴充功能為基礎,ICRT 專用的 Chrome 擴充功能也製作好了,安裝以後,可以用來幫 ICRT 文章的全文,加上時間戳記,製作自己的英文學習材料。這個擴充功能已經上架到「Chrome 線上應用程式商店」。

    [圖1] ICRT 擴充功能的圖示

    ICRT Episodes Timestamp 擴充功能在商店的網址如下:

    影片示範

    底下的 YouTube 影片示範如何使用 ICRT Episodes Timestamp 擴充功能及搖桿,來幫 ICRT 的 News for Kids 文章,加上時間戳記及進行聲音的播放:

    功能簡介

    ICRT Episodes Timestamp 擴充功能讓 ICRT 網站或是 ICRT Pocast (SoundOn) 中的全文可以編輯,增強聲音播放的功能,增加了倒轉、快轉、降速、加速,並能邊聽邊插入時間戳記;按一下加好的時間戳記,即可由該時間點重播聲音;最後還可以匯出為 SRT 格式的字幕檔。

    擴充功能除了可以按畫面中的功能鈕來執行指令,也可以使用鍵盤來控制,甚至使用搖桿來操作,以下為按鍵與功能的對照表:

    鍵盤快速鍵功能:

    • F1 : 倒轉
    • F2 : 快轉
    • F3 : 降速
    • F4 : 加速
    • Esc : 播放或暫停
    • Ctrl + J : 插入時間戳記

    搖桿按鈕控制功能:

    • 右側的上: 播放/暫停
    • 右側的下: 插入時間戳記
    • 右側的左: 倒轉
    • 右側的右: 快轉
    • 左側的左: 減速
    • 左側的右: 加速
    • 左側的下: 跳到下一句
    [圖2] ICRT 擴充功能可使用的搖桿按鈕

    安裝與使用

    安裝擴充功能

    ICRT Episodes Timestamp 在 Chrome 線上應用程式商店的網址如下:

    以 Chrome 瀏覽器開啟商店的頁面以後,找到右上角「加到 Chrome」的按鈕,按下去;再按「新增擴充功能」的按鈕,即可完成擴充功能的安裝。

    使用說明

    ICRT Episodes Timestamp 必須要在 ICRT 網站的「News Lunchbox」,或是 ICRT 在 SoundOn Pocast 中,才會出現擴充功能新增的按鈕。底下列出它們的連結:

    如果想應用在 ICRT 的 News for Kids 或是 News Bites ,建議使用 News Lunchbox 的全文,載入速度快,版面也較簡單,開啟這個網址:

    如果不是要看當日的內容,可以依需求設定「發布日期」後,按「搜尋」:

    [圖3] ICRT News LunchBox 搜尋指定的日期

    找到指定日期後,News LunchBox 中,每日的內容都包括了國小用的 News for Kids 與國中用的 News Bites;如果搜尋的是多日的內容,則會依序出現在下方。

    [圖4] 在ICRT New LunchBox 中加入時間戳記

    只要是在 LunchBox 的頁面中,就會如 [圖4] ,在畫面左側出現擴充功能的按鈕。先在要加入時間戳記的地方以滑鼠按一下,出現游標,播放後,即可邊聽,再按「插入時間戳記」的按鈕(或是按鍵盤的 Ctril + J;搖桿右側按鈕的「下」)。請參考前面 YouTube 影片的示範。

    如果想應用在 ICRT EZ News ,因為 ICRT 網站的全文排版是所有文句都連在一起,不是句句分開的,所以建議在 SoundOn 的網站中操作,開啟以下的網址:

    進入頁面後,按一下要使用的文章標題,稍等一下,應該就會出現擴充功能的按鈕;如果沒有出現,就按一下 Chrome 瀏覽器「重新載入」的按鈕。

    [圖5] SoundOn 中的 EZ News

    [圖6] 在SoundOn EZ News中插入時間戳記

    無論在 ICRT LuhchBox 或是 SoundOn 中,加完時間戳記,看是要立即按時間來快速跳到該處重播聲音,或是匯出為字幕檔,擴充功能的操作是差不多的。

    Q & A

    • Q : 為什麼安裝了 ICRT Episodes Timestamp 擴充功能,進了 ICRT 網站了,卻沒有看到擴充功能的按鈕?
      • A : 擴充功能只會在 ICRT News LuhchBox 或是 SoundOn 的文章中才出現擴充功能的按鈕。請參考前面「使用說明」小節中有列出可用的網址及說明。
    • Q : 確定開啟 SoundOn 的文章了,為什麼還是沒有看到擴充功能的按鈕?
      • A : SoundOn 因為網站架構的問題,有時會這樣,Chrome 瀏覽器的「重新載入」按按鈕(或是鍵盤的 F5 鍵),讓頁面重新載入,應該就會出現擴充功能的按鈕了。
    • Q : 插入時間戳記後會自動跳到一下句,為什麼遇到縮寫的字,就不是移到下一句?
      • A : 目前擴充功能是以「. ? ! ' "」來判斷句子的結束點,而英文縮寫使用到了句號,所以會誤判,目前只能以滑鼠在正確的位置按一下的方式,來解決縮寫句號造成的誤判。
    • Q : 匯出的  SRT 格式字幕檔要如何使用?
      • A : 匯出的字幕檔中除了文本、時間戳記以為,其實也有註記音檔的網址,可以使用 HTML5 FUN Audio Player 來匯入使用,可以參考底下的連結:
    • Q : 沒在使用 Chrome,有類似的工具可以使用嗎?
      • A : 可以試試我改良過的 oTranscribe,不過使用起來沒有專門針對 VOA Learning English 特別客製的擴充功能那麼方便。

    相關連結

    更新記錄

    • 2024.10.02 v.1.0 審核通過並上架。
    • 2024.10.01 v.1.0 申請上架 chrome 線上應用程式商店。


    2024年9月25日 星期三

    Chrome : 擴充功能 : VOA Learning English Timestamp

    2024年9月25日 星期三

    VOA Learning English (https://learningenglish.voanews.com/) 也是一個學習英文的好材料,七、八月我利用自己設計的小工具將 LESSONS OF THE DAY 的文章轉一下格式(一句一行),然後用改良過的 oTranscribe ,邊聽文章,邊加上時間戳記;全部完成以後,輸出為 SRT 格式的字幕檔,就能在 HTML5 FUN Audio Player 中載入字幕檔及聲音檔,可以在任意段落重播,也可以翻譯 (雄:以 ICRT & VOA Learning English 提升英文能力)。

    哈!看了前面的描述,有沒有快暈了?

    為了簡化程序,這幾天乾脆打造一個 Chrome 擴充功能叫作「VOA Learning English Timestamp」,並上架到「Chrome 線上應用程式商店」。

    擴充功能網址如下:

    示範影片

    底下影片簡單示範如何安裝及使用 VOA Learning English Timestamp 的擴充功能:

    功能介紹

    VOA Learning English Timestamp 的主要功能是可以在 VOA Learning English 「LESSONS OF THE DAY」(https://learningenglish.voanews.com/z/952) 的文章段落添加時間戳記,按了加好的時間戳記,就可以跳到該時間重播聲音;如果全文都加完時間戳記了,也可以將它們匯出為 SRT 格式的字幕檔案;此外也擴充了聲音播放的控制功能。

    主要的功能如下:

    • 在游標位置添加播放時間戳記。
    • 按一下加好的時間可跳到該時間後播放聲音。
    • 將時間和文本轉換為 SRT 格式的字幕檔。
    • 擴充聲音播放的控制功能,如下:
      • 倒轉
      • 快轉
      • 減速
      • 加速
    • 支援以鍵盤快速鍵控制擴充的功能,如下:
      • F1 : 倒轉
      • F2 : 快轉
      • F3 : 減速
      • F4 : 加速
      • Esc : 播放或暫停
      • Ctrl + J : 插入時間戳記
    • 支援搖桿用按鈕來控制:
      • 右側的上: 播放/暫停
      • 右側的下: 插入時間戳記
      • 右側的左: 倒轉
      • 右側的右: 快轉
      • 左側的左: 減速
      • 左側的右: 加速
      • 左側的下: 跳到下一句

    安裝擴充功能

    VOA Learning English Timestamp 在 Chrome 線上應用程式商店的網址如下:

    使用 Chrome 瀏覽器,打開這個網址就可以右上角的安裝鈕安裝擴充功能。

    使用擴充功能

    安裝好 VOA Learning English Timestamp 擴充功能以後,它只會在 VOA Learning English 網站中,Lessons of the DAY 的文章才出現擴充功能的按鈕。

    所以開啟 Lessons of the DAY 的文章清單:

    然後挑一則想測試的文章,就可以開始玩擴充功能了。

    Q & A

    • Q : 為什麼安裝了 VOA Learning English Timestamp 擴充功能,進了 VOA Learning English 網站了,卻沒有看到擴充功能的按鈕?
    • Q : 明明已經是 Lessons of the DAY 的文章,為什麼還是沒有看到擴充功能的按鈕?
      • A : Lessons of the DAY 裡面,有一些是有關文法、單字的影片,因為它們沒有文本,所以無法插入時間戳記。
    • Q : 插入時間戳記後會自動跳到一下句,為什麼遇到縮寫的字,就不是移到下一句?
      • A : 目前擴充功能是以「. ? ! ' "」來判斷句子的結束點,而英文縮寫使用到了句號,所以會誤判,目前只能以滑鼠在正確的位置按一下的方式,來解決縮寫句號造成的誤判。
    • Q : 匯出的  SRT 格式字幕檔要如何使用?
      • A : 匯出的字幕檔中除了文本、時間戳記以為,其實也有註記音檔的網址,可以使用 HTML5 FUN Audio Player 來匯入使用,可以參考底下的連結:
    • Q : 沒在使用 Chrome,有類似的工具可以使用嗎?
      • A : 可以試試我改良過的 oTranscribe,不過使用起來沒有專門針對 VOA Learning English 特別客製的擴充功能那麼方便。

    相關文章

    更新記錄

    • 2024.10.01 v.1.1.4 搖桿左側按鈕控制新增下(跳到下一句)。
    • 2024.09.30 v.1.1.3 修正匯出時,有時未抓到文章名稱的問題;搖桿控制改為不可長按連發,並新增左側按鈕的控制,左(減速)、右(加速)。
    • 2024.09.29 v.1.1.2 支援搖桿右側的四個按鈕來控制,上(播放/暫停)、下(插入時間戳記)、左(倒轉)、右(快轉);擴充功能新增的控制按鈕區塊可以使用拖曳的方式改變位置。
    • 2024.09.28 v.1.1.1 修正 Backwards 按鈕因為指令輸入錯誤,導致按了沒作用的問題。
    • 2024.09.27 v.1.1 修正使用鍵盤操時,Ctrl 鍵偵測的方式有時會讓 Ctrl + J 失效的問題;拿掉兩項不必要的權限。
    • 2024.09.25 v.1.0 通過審核並上架。
    • 2024.09.24 v.1.0 申請上架 chrome 線上應用程式商店。


    2024年9月11日 星期三

    HTML5 : 利用 tracking.js 偵測顏色設計的遊戲

    2024年9月11日 星期三

    前幾天看公視的「一字千金」,跟小孩說,哈!其實我也可以設計一個利用攝影機跟色卡,來設計形近字跟同音字的小遊戲,以舉「色卡」的方式回答問題。很久沒玩 Webcam 應用的程式了,找了一下, 看到了 tracking.js :

    tracking.js 的小巧,勾起了我的興趣,於是簡單地設計了一個雛形。

    錄了一小段測試的影片,可以到 YouTube 中觀看:



    有什麼想法,歡迎在底下留言哦~~ ^_^


    2024年9月5日 星期四

    JavaScript : 同時按下多個按鈕無效的處理

    2024年9月5日 星期四

    在多點觸控的系統中,如果同時按下多個按鈕,會是什麼結果?被按下的按鈕都會有反應嗎?

    這幾天在將 2010 年寫的分組搶答工具 TeamPlay (參考舊文: 雄:Teaching : TeamPlay 分組競爭提高學習樂趣 ) 改為 HTML5 版,昨天和小孩在測試時,兩個人在 iPad 上同時按下按鈕時,才發現按鈕居然沒反應,哈!傷腦筋,但也覺得很開心,又發現新問題了!

    [圖1] 實驗中的 HTML5 TeamPlay

    底下來做個小實驗,在支援多點觸控的裝置上,同時按下多個紅色按鈕,看有沒有反應;再同時按下多個綠色按鈕,看有沒有反應:

    輸出結果


    這兩種顏色的按鈕在設計有什麼差別呢?

    紅色按鈕在按下時,會觸發 click 事件;而綠色按鈕在按下時,則是觸發 touchstart 事件。很明顯地,像 TeamPlay 這種搶答的工具,必須要能接受同時按下多個按鈕的情況,所以答案的按鈕不能使用 click ,不然遇到同時按下多個按鈕時,會沒有反應,而無法送出答案,中斷接下來的程序。

    相關連結



    2024年8月23日 星期五

    HTML5 FUN : English800 : 用800句記7000個單字

    2024年8月23日 星期五

    家有高中生,想幫忙有效率的提升英文能力,在找英文單字的相關資料時,看到一則別人轉的舊文說到「花16天-用800句-記7000個英文單字」,哈!這標題是不是很吸引人?於是我將那800句抓回來,用 ChatGPT 分析出單字,並加上中文,利用這些資料,設計了個記單字的配對小遊戲「HTML5 FUN English800」。

    玩法很簡單:將中文詞卡,拖曳至配對的英文字卡上放開;全部都答對,就會出現下一關「看中文選英文」多選一的作答方式。如果兩關都沒有答錯過,畫面最上方的「指示器」,就會變成綠色的,有答錯,則會是橙色的。接著可以利用右下方的「Next」或「Previous」按鈕,來進入下一題,或是回上一題繼續作答。練習時,程式會記錄答題狀況,可以按畫面左上角的「選單」圖示(三條線),針對學習記錄進行匯出、匯入或是刪除重置哦!

    開啟 English800



    操作說明(影片)

    Q&A

    • Q : 換了別部電腦,或是裝置後,可以接續原來的進度嗎?
      • A : 按 English800 畫面的最左上角,有一個選單的圖示(三條線),先按一下「匯出記錄」,然後將匯出的檔案放到雲端硬碟;在另一部電腦或裝置中,再展開選單,按「匯入記錄」,指定使用前面匯出的檔案,即可繼續未完成的進度。
    • Q : 平板是共用的,如何將別人的記錄清除?
      • A : 在 English800 畫面的最左上角,按選單的圖示(三條線),然後按一下「清空記錄」,即可將原有的記錄刪除,重新開始。
    • Q : 可以跳題練習嗎?
      • A : 可以的,在 English800 的畫面右下角有兩個按鈕可以每次往前或往後跳一題;也可以在畫面上的「題號指示器」,拖曳圓形的「鈕」來移至想做的題目。
    • Q : 如何使用查字典的功能?
      • A : 先在句子上,將要查詢的單字「反白」,再按下左下角想用的字典按鈕,即可在新的分頁中開啟字典。
    • Q : 為什麼有時聽不到 TTS 的合成語音?
      • A : 本工具目前使的是 Google 翻譯的合成語音服務,有時可能因為流量管制(機器人偵測),而暫時聽到合成語音。

    版權聲明

    English800 中的 800 句英文句子擷取自未知原始來源的網路資料:

    英文句子版權屬原創作者。

    單字與句子翻譯則是以 MS Bing Copilot 由英文句子解析產出,彙整後以 HTML5 FUN English800 程式載入使用。題庫資料及程式僅供自學使用。

    相關連結

    更新記錄

    • 2024.08.24 匯入記錄支援使用 drag & drop 的方式;支援直拿的版面。
    • 2024.08.23 卡片的拖曳支援多點操作(哈! 能幹嘛?!管它,就是有新發現,加上去,以後別的程式可以直接拿來用);解決在 iOS 10.3.4 中,拖曳不正常的問題 (getComputedStyle 沒有將百分比轉為 px),檢查兩物件是否相疊不正常的問題(getBoundingClientRect 沒有 x 和 y,只好用 left 和 top 替代)。
    • 2024.08.22 加入學習記錄的相關功能;以 Range slider 顯示作答進度,並可用來快速選題。
    • 2024.08.21 加入多選一的挑戰模式;加入用 TTS 念出英文及中文的功能,中英文分開念,以達到較好的效果。 
    • 2024.08.20 初版測試。


    ×

    HTML5 FUN::English 800

    學習記錄


    2024年8月13日 星期二

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

    2024年8月13日 星期二

    ICRTVOA Learning English 均有在網站中提供語音檔及全文內容,是英文自學的好材料。最近我跟小孩子以這些材料自學,邊聽邊看時,順便利用 oTranscribe  (已改用 Chrome 擴充功能來製作) 將文字內容加上了時間戳記,製作成字幕檔(SRT格式),可以利用我 2024年7月新製作的一個小工具 HTML5 FUN Audio Player 將字幕檔案及語音檔載入後,訓練自己的聽力及閱讀能力。

    底下將目前已製作好的內容列出,供大家自學使用。在每一則的字幕最後均有附上原始來源的網址,也可以連至原始網站參考使用。

    按底下的紅色按鈕後即可開啟選單,再依需求選取想自學的內容。

    版權聲明

    字幕文字內容及語音版權均屬原始網站,字幕及程式僅供自學使用。

    原始資料來源網址如下:

    相關連結

     
    雄::gsyan © 2009. Design by Pocket