顯示具有 JavaScript 標籤的文章。 顯示所有文章
顯示具有 JavaScript 標籤的文章。 顯示所有文章

2025年9月2日 星期二

擷取 Google 雲端硬碟圖片縮圖網址

2025年9月2日 星期二

製作網頁遊戲時，可以使用放在 Google 雲端硬碟中的圖片嗎？一般來說，在瀏覽器中會因為 CORS 的跨域讀取限制，無法直接應用 Google 雲端硬碟的圖片在網頁遊戲裡，但如果是雲端硬碟圖片的縮圖，則不會受限制。所以如何取得圖片縮圖的網址就是關鍵。

▋ 擷取 Google 雲端硬碟圖片縮圖

這個小工具可以解析出已共用為「知道連結的任何人」 Google 雲端硬碟「資料夾」中，所有圖片的縮圖網址，大小為 640x480，雖然解析度不高，但應用於一般的遊戲中的插圖，算還不錯。

▋ 使用方法

程式會在已公開共用的雲端硬碟資料夾頁面中，找出所有圖片的清單，解析出檔名及其縮圖的網址，能輸出「主檔名」和「圖片網址」兩個欄位，欄位分隔符號使用跳格的符號，所以複製輸出結果後，可以直接貼到試算表中使用。操作程序如下：

  • ✅ 在 Google 雲端硬碟建立資料夾。
  • ✅ 設定共用為「知道連結的任何人」「檢視」。
  • ✅ 將要使用的圖片上載到雲端硬碟資料夾中。
  • ✅ 確認圖片的檔名(如果要輸出檔名為題目欄位)。
  • ✅ 複製共用的連結。
  • ✅ 在本文的工具中貼上連結，按 [開始解析] 鈕。
如果順利，最後可以按 [複製到剪貼簿] 鈕，將資料複製後應用。

▋ 開始使用

目標：解析雲端硬碟「資料夾」中圖片的縮圖網址

        

OK

 

複製到剪貼簿的資料可以直接貼到試算表中，會自動分欄、分行，貼在試算表的儲存格中。

這個解析出縮圖網址的工具已經內建在 HTML5 FUN 的烘焙機中，另外，也可以在 Google 試算表中的自訂公式來進行解析應用，可以參考三月的舊文「雄:以雲端硬碟資料夾的圖片製作注音高手」

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

2025年8月26日 星期二

利用 iframe 解決因為 CORS 而抓不到YT字幕的問題

2025年8月26日 星期二

前兩天發現 HTML5 FUN Audio Player 怎麼樣都抓不到 YouTube 字幕；查了一下，看來多變的 YouTube 又出招了，讓原本由影片頁面原始碼中擷取到的字幕網址失效了，只能抓到空白的內容。研究了大半天，找到了另一個方法 (有興趣可以參考 jdepoix 的 youtube-transcript-api )，主要就是先由影片的頁面原始碼中找到「INNERTUBE_API_KEY」，然後再利用 YouTube 的 API ，以 POST 的方式取得影片資訊，如果成功，就能拿到影片字幕軌資料的網址。

以 JavaScript 使用新方法來擷取影片資訊的第一關會是在 POST 時的 CORS 問題，如果透過 CORS proxy 當然是可行的方法，一般來說，利用 Google Apps Script 也能寫出 CORS proxy，不過 YouTube 的 API 有在擋 bot，Google Apps Script 直接就被封殺了，網路上其它 CORS proxy 服務也沒好到哪裡去，多玩個幾次，就只能得到這樣的訊息了：

status: 'LOGIN_REQUIRED',
reason: 'Sign in to confirm you’re not a bot'

想要的資料當然就撈不到了。

後來發現，原來在瀏覽器中用 fetch ，不透過 CORS proxy 來 POST  ，就能使用 YouTube API 了，倒是有個小地方要注意，不然就會一直出現：

Access to fetch at 'https://.......' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

裡面最重要的關鍵字是「preflight」，當 Content-Type 是 application/json 時，瀏覽器在未傳送資料給遠端前，會先自我審查是否違反 CORS，難怪我一直看不到 YouTube API 的回應。要怎麼改呢？

只要在 fetch 參數中的 headers 指定 Content-Type 為 text/plain ，它就會使用 simple header ，然後可以避免 preflight，加入：

headers: {
  'Content-Type': 'text/plain', 
}

不透過 CORS proxy 來呼叫 YouTube API 的好處是，比較不會動不動就被 YouTube 判定為 bot 而抓不到資料，是不是很棒？！

不過，當我很開心地將改良過的程式應用到 Blogger 中的 Audio Player 時，居然還是出現違反 CORS 的訊息，為什麼？

底下兩張截圖來探討原因，關鍵已經用箭頭標示出來了：

[圖1] origin 為 blog 的網域

[圖2] origin 為 null

如 [圖1] 所示，當程式在 Blogger 中執行時，origin 被設定為 Blogger 所在的網域，瀏覽器送給 YouTube API ，因為兩者在不同的網域，這樣一來，就會因為 CORS 的問題，無法抓到資料了。同樣的程式碼，由本機載入並執行時，會像 [圖2] 一樣，origin 被設定為 null，YouTube API 接受了，會回傳資料 (這不知道是故意的，還是 API 的 bug，哈！但是我喜歡它現在的狀況)。

本來在研究 YouTube embed 時的 iframe 結構，看看能不能從中挖出字幕，一份資料中提到如果使用 base64 編碼後的 data URI 當 iframe 的 src ，會導致 origin 被設定為 null，就會讓它變成與頁面不同源，而無法存取頁面中的資料 (這一點其實是可以利用 postMessage 來交換資料) ......。

綜合前面看起來像問題的點，因為一個關鍵字「null」，讓我兜出了一個可行的方案。

如果產生一個只用來透過 YouTube API 抓影片資訊的 iframe，而且程式碼用 base64 編碼以後，設定為 iframe 的 src，利用 postMessage 傳影片的 id 與 api key 給 iframe, iframe 收到後，執行抓資料的程序，再使用 postMessage 回傳影片資料給 Audio Player。

哈！就這樣子，Audio Player 又能順利抓到 YouTube 的字幕了！

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

2025年5月16日 星期五

SVG ID 衝突導致顯示異常

2025年5月16日 星期五

一般來說， 在頁面中，ID 應該是唯一的才對，但是實務上，不見得會有影響；不過，最近在測試開發中的新版筆順練習程式時，終於踢到鐵板了！

筆順示範的動畫是先建立一個筆畫的「遮罩」，然後在遮罩下，不斷的用不同座標畫大大小小的圓，畫面上只會看到該筆畫慢慢地被「塗上」顏色，彷彿用筆在寫的樣子。所以「遮罩」是很重要的關鍵。在 SVG 中設定要使用哪一個遮罩是用類似這樣的語法：

mask="url(#demo-mask)"

也就是設定名稱為「mask」的屬性，而用「url(# ... )」來指定用 ID 為 ... 的 mask ；以前面的例子來說，它指定使用 ID 為「demo-mask」的遮罩。

整個網頁中只有一個 ID 是「demo-mask」的話，當然不會有任何問題；如果有多個 ID 都叫作「demo-mask」，「url(#demo-mask)」只會取用第一個；應用在第一個 SVG 也不會有問題，其它的 SVG 就無法正常顯示了。之所以會踢到鐵板，完全是因為自己愛亂玩，一次在頁面中放了好幾個國字的 SVG ，而它們的遮罩的 ID 通通叫作「demo-mask」，玩到第二個字以後，只有第一個置入頁面的會正常顯示；這部份倒是和設定 style 不同，style 是後載入的會覆蓋先載入者。

▋ 動態產生 uuid 

怎樣動態產生唯一的 ID 呢？

之前曾看過別人使用這樣的語法：

uuid = function b(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,b)}

只要呼叫 uuid() 就能得到一個不會重覆的 uuid。

另外一個語法是：

window.URL.createObjectURL(new Blob([])).slice(-36)

哈！我是喜歡簡潔一點的後者。如果想讓 id 短一點，就將 36 改小一點。

▋ 測試

以下的字，照設計的流程是：

  1. 多色的靜態筆畫。
  2. 按完播放鈕，筆畫變紅色。
  3. 黑色的書寫動畫。
  4. 黑色靜態筆畫，至全字動畫播畢。
  5. 多色的靜態筆畫。

可以觀察一下，當 mask 使用相同 ID，與使用不同 ID 有何差異，按底下的按鈕，開始測試：

[圖1] 是右邊的「試」 在 [測試1 (相同ID)] 中，第四筆畫時的截圖，本來應該是寫橫畫的，卻冒出了豎畫。我故意將「測」的輪廓疊上去，比較容易看出豎畫哪裡冒出來的；。那其實就是第一個字「測」的第四筆畫，「貝」的起筆豎畫製作的遮罩，「試」此時寫的是橫畫，所以只能看到短短的豎畫，這是因為遮罩 ID 衝突，所造成的誤用。而在 [測試2 (ID不同)] 中，兩個字都能正常的顯示遮罩內容。

[圖1] 右邊的字誤用了左邊的遮罩而不正常

所以在 SVG 中有使用到「url(# ... )」來指定對象者，ID 在命名時，務必要特別注意，不然就會像我，程式改來又改去，對的程序都會改成錯的了。
閱讀全文
By at 沒有留言:
標籤: ,

2025年5月3日 星期六

SVG 轉 ODP 簡報小工具

2025年5月3日 星期六

HTML5 FUN 的筆順練習工具，除了提供 PNG 格式的部件圖片下載（一個部件一個檔案）；也有提供 SVG 格式的圖形檔（一個檔案中，放多個可以單獨操作的部件）。不過，不是每個工具或平台都能直接匯入 SVG 圖形檔，或是匯入了 SVG 圖形，卻被轉為非向量圖片，無法輕鬆地將筆順部件拆解。試了一下大家常用的工具：

  • InkScape : 本身就是向量圖的編輯器，還能儲存或是匯出為各種格式，SVG 支援度最高，但可能需要花一點時間學習怎麼使用。
  • Google 文件：不支援匯入 SVG 檔案，貼上的 SVG 圖形會轉為點陣圖，無法直接拆解部件。
  • MS Office 線上版 : 可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
  • Canva 網站：可以貼上或是匯入 SVG 圖形，但是會轉為點陣圖，無法直接分解部件。
  • LibreOffice : SVG 支援度極高，貼上或是匯入的 SVG 圖片，而且還能拆解圖中的各部件。

▋ 好轉通吃的 ODP 簡報

LibreOffice 很好用，跟 MS Office 也很像，不但免費，能匯貼或是貼上 SVG 圖形，而且它儲存的簡報檔案 (.odp) 可以使用 Google 簡報、MS 簡報、Canva ...... 等來開啟，將 LibreOffice 簡報檔 (.odp) 上載到各平台的雲端硬碟中，開啟時，除了能轉成各平台的簡報格式外， .odp 簡報中的 SVG 圖形如果有「斷開」、解除群組，也能在各平台中保有圖形部件，直接獨立操作的特性。

什麼！還要再學怎麼使用 LibreOffice 哦！應該又一堆人卻步了！

[圖1] svg2odp 可以將筆順 SVG 轉為 ODP 簡報

最近花了一點時間研究怎麼將筆順練習匯出的 SVG 部件檔案，甚至其它 SVG 圖形檔，置入 LibreOffice 簡報(Impress) 的 .odp 的格式，並寫成一個小工具 (svg2odp)。透過簡單的步聚，即可輕鬆下載 .odp 的簡報檔案，然後可以將簡報檔案上載到 Google 雲端硬碟、微軟雲端硬碟，或是 Canva 中。

[圖2] 將 ODP 簡報上載到 Canva 可自行重組

▋ 使用方法

以 HTML5 FUN 筆順練習來說：

  • ✅ 在筆順練習的「部件拆解」功能中，按一下左下角綠色的下載圖示  📥 (如圖3)。
  • ✅ 按下「下載部件 SVG」或「下載筆畫 SVG」，即可儲存為 SVG 圖檔 (如圖3)。
  • ✅ 利用「SVG 轉 ODP 簡報小工具」將 SVG 轉為 ODP 簡報檔。
  • ✅ 將 ODP 簡報檔上傳到雲端硬碟或網站，並開啟檔案，即可得到國字部件， (如圖4)。

[圖3] 在筆順練習中下載 SVG 圖檔

[圖4] 將轉好的 ODP 簡報檔案上傳到 Canva

▋ SVG 轉 ODP 簡報小工具


拖曳 SVG 筆順部件檔案到這裡(支援多檔案)
或是按這裡來選取檔案

解除所有群組

▋ 操作示範影片

▋Q & A

  • Q: 勾選「解除所有群組」有什麼效果？
    • A: SVG 轉 ODP 簡報小工具除了筆順練習的 SVG 檔，預設會保留各物件的群組設定，勾選「解除所有群組」後，所有的群組都會被解除；以筆順練習的 SVG 檔來說，通通會變成以筆畫為最小單位。群組都被解除的好處是可以自己再重組。
  • Q: 一個簡報檔案中可以放幾個 SVG 圖形？
    • A: 當有多個 SVG 圖形時，程式會計算適合的大小，所以數量就看個人需求。
  • Q: 拖曳到轉換工具的圖形，怎樣刪除不用？
    • A: 在每一張預覽圖片的右下角有一個叉叉，按一下即可移除。
  • Q: 在轉換工具區塊右下角的綠色圓圈是做什麼的？
    • A: 綠色圓圈可以貼上 SVG 圖形的語法，或是放在網路上的 SVG 圖形網址，程式會載入 SVG 圖片供轉換。
    • 可以試試這幾個有提供 SVG 圖片網址或語法的圖庫網站：
  • Q: 在預覽圖片的左下角有一個鎖頭是什麼用的？
    • A: 初版的工具無法處理較複雜的 SVG 圖形，就只能以不轉換繪圖指令的方式，將 SVG 圖片篏入 ODP 簡報檔中，因此以鎖頭的圖示來區別；現在的版本已經用 flatten.js 預先處理過了，所以大部份的圖片應該都不會再「加鎖」。
  • Q: 那個燈泡的圖示是做什麼用的呢？
    • A: 哈！務必試試看，多按幾次就知道囉！

▋ 參考資料

SVG 轉 ODP 簡報小工具中使用到的一些專案及相關的資料列在下面做個記錄，也感謝大家的分享，解決了我不少問題：

▋相關連結

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

2025年4月15日 星期二

GitHub 檔案取得沒有 CORS 限制的網址

2025年4月15日 星期二

前一陣子赫然發現 GitHub Pages 中的檔案似乎都沒有 CORS 的問題，可以在瀏覽器中，以 fetch 隨意抓取各種檔案；不過，如果是 GitHub 專案儲存庫檔案，直接複製瀏覽時的檔案網址，就行不通了！

例如在 2020年分享過的「雄:3DP : Lenticular Card 雙變卡產生器」LenticularCard 專案中的範例模型檔的網址是：

如果要利用 Three.js 直接載入這個網址的 STL 模型，肯定會出現類似這樣的錯誤訊息：

Access to fetch at 'https://github.com/......' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

▋ 解決 CORS 的問題

GitHub 專案儲存庫檔案的網址會有 CORS 問題，怎麼辦呢？

將網址處理一下：

  • 最前的「https://github.com」置換為「https://raw.githubusercontent.com」。
  • 中間的 「blob/master」  置換為 「master」。

利用 Regular Expression 就可以輕鬆搞定：

replace('github.com', 'raw.githubusercontent.com').replace(/(blob)\/(master|main)/, '$2')

所以前面的模型檔的網址改用：

這樣子就可以在網頁瀏覽器中順利地利用 JavaScript 載入模型檔案了。來測試一下:

STL模型網址：

▋ 轉換小工具

不免俗的，利用 JavaScript 寫個轉換式：

GitHub 檔案的網址：

無 CORS 問題的網址

?  

▋ API

看到有人利用呼叫 API 的方法取得檔案的相關資訊及內容，也滿有意思的，先記錄下來。

假設 GitHub 檔案的網址是 url，轉換為 API 的網址：

apiUrl = url.replace('github.com/','api.github.com/repos/').replace(/(blob)\/(master|main)/, 'contents');

這個網址可以取得 JSON 格式的檔案資訊，再利用其中的「git_url」，可以取得檔案的詳細內容(JSON 格式)，最後的「content」，以前面的 STL 模型檔來說，應該是用 base64 編碼過的資料，宣告一下編碼格式，在前面加上「data:application/sla;base64,」，就能直接給瀏覽器使用了。

也就是利用 API ，呼叫兩次也能取得檔案的資料。

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

2025年4月2日 星期三

Blogger : 解除預覽封印

2025年4月2日 星期三

向來喜歡 Blogger 的簡單界面，又能直接寫語法，不知道哪一天它如果被 Google 收掉，會不會很不習慣其它平台的。不過，在寫程式時，Blogger 的預覽讓我有一點點困擾，它預覽時，只能看，不能「玩」，很明顯地，在我們的文件上方，有被動手腳，讓滑鼠或是觸控的事件被搶先一步，攔截走了。

昨天在發布 HTML5 FUN 最新遊戲做成的「唐詩迷宮」時，不能在預覽時，直接測試，實在覺得不快，於是追縱測試了一下，找到解除 Blogger 預覽封印的方法了！

關鍵在 class name 為「blogger-clickTrap」的元件上，只要讓它消失了，封印就自然解開，讓我的程式可以跟發布後的頁面一樣，可以自由測試。使用的 JavaScript 語法如下：

//解除預覽封印
if(/預覽/.test(document.title)) {
  setTimeout(function() {
    var clickTrap = document.querySelector('.blogger-clickTrap');
    if(clickTrap) {
      clickTrap.style.display='none';
     console.log('\n\nrelease preview click trap ...\n\n');
    }
  }, 1000);
}

哈！能自由呼吸、能跑、能跳 ...... 真是一件愉快的事。咦！這樣子，以後一些私房的小工具，不發布也能使用了。
閱讀全文
By at 沒有留言:
標籤: , , ,

2025年1月27日 星期一

Google 試算表 + JSZip 製作 2P 題庫

2025年1月27日 星期一

▋ 在瀏覽器中玩 2P 遊戲

前幾天試著利用 Google 試算表當題庫來源，搭配我的「SWF 遊戲啟動器」，然後在 Ruflle Flash Player 模擬器中執行噗友瘋狂布蘭達的 2P 遊戲，在網頁瀏覽器中的順暢度還是沒有單機版來得好，尤其題目帶有圖片時更能體會出差異性。畢竟 Ruffle 是模擬器，耗掉的資源可能還是比較多。

▋ 偶遇 JSZip

整合 Google 試算表與 2P 遊戲時，讓我想到十幾年前以 Excel VBA 寫的工具 new-converter.xls (詳見「雄:Teaching : 以 Excel VBA 將題庫轉為 2P 遊戲格式」)，new-converter.xls 只能處理純文字的題目，圖片題得自己按照遊戲題庫的要求改檔名；而「SWF 遊戲啟動器」的題庫是讀取 Google 試算表，其實只要寫幾行格式轉換，再將題庫輸出到檔案，就可以供單機版的 2P 遊戲載入使用。要解決的問題只剩下如何利用 JavaScript 讓瀏覽器可以將多個待輸出的檔案內容打包，再回傳給使用者。哈！剛好又看到了一直沒有測試的 JSZip，它可以在瀏覽器中，以 JavaScript 將指定的內容加入 zip 壓縮檔內，內容可以是文字，也可以是圖片，更能建立目錄，完全符合我的需求；那就來試著應用看看吧！

▋ 2P 題庫製作流程

這則中的方法是利用 Google 試算表來當設定及題目的來源，所以最重要的程序將試算表範例中的內容換掉，剩下的就是共用試算表及複製試算表工作表的網址了。整個程序如下：

  • 開啟試算表範例：
    • ▶️ 題庫樣板 2p-Txt  ▶️ 題庫樣板 2p圖文 (同一個檔案)
    • 第一次使用要建立副本（檔案 => 建立副本）。
    • 設定共用為「知道連結的任何人」「檢視者」。
  • 打開 2P 的工作表(2p-Txt 或 2p圖文)。
  • 修改設定。
  • 修改題庫。題目主要可以分為三大類
    • 只有文字。
    • 題幹有圖片，但是選項是文字：題幹如果想加圖片，在文字的最後面加一個分號「;」，再貼上圖片的網址。
      (例) ▶️我是文字;https://a.b.c.d/test.png
    • 題幹只有文字，選項用圖片。
  • 複製工作表的網址：在瀏覽器上方的網址列中，將網址複製起來。
  • 貼到下一步驟「參數設定」的試算表網址輸入區，並送出。
▋ Ready ~ Go ~~

▶️ 想先用自製遊戲啟動器試玩一下，就按底下的連結：

▶️ 確認已將試算表共用給「知道連結的任何人」，並複製好工作表的網址，就貼到底下：

參數設定

Google 試算表2P工作表共用連結網址
【送出並下載2P題庫】
× 處理中，請稍候。

▋ Q & A

  • Q: 下載的壓縮檔案為什麼有些圖片沒有加進去?
    • A: 會自動加到壓縮檔案的圖片必須來自網路的，如果碓認圖片的網址沒有問題，由於瀏覽器對於圖片會檢查來源是否有允許「跨域使用」，可能是放圖片的網站不開放跨域使用。建議可以改用 pixabay 的圖片試試。
  • Q: 可以使用放在 Google Drive 中的圖片嗎?
  • Q: 題目需要指定 Type 參數嗎?
    • A: 題庫轉換程式會自動用題庫題幹及選項中是否帶有圖片的關鍵字來設定 Type 為 0、1 還是 2。 

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

    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 線上應用程式商店。
    閱讀全文
    By at 沒有留言:
    標籤: , , ,

    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 線上應用程式商店。
    閱讀全文
    By at 沒有留言:
    標籤: , , ,

    2024年9月11日 星期三

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

    2024年9月11日 星期三

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

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

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



    有什麼想法，歡迎在底下留言哦～～ ^_^
    閱讀全文
    By at 沒有留言:
    標籤: , ,

    2024年9月5日 星期四

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

    2024年9月5日 星期四

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

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

    [圖1] 實驗中的 HTML5 TeamPlay

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

    輸出結果


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

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

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

    2024年7月28日 星期日

    CORS proxy 的快取問題

    2024年7月28日 星期日

    今天家族聚餐時，跟在念高中的表弟女兒推薦最近完成的作品「HTML5 FUN Player」，沒想到展示如何讓 YouTube 可以有雙語的字幕卻「凸槌」了！影片可以載入，字幕卻連選單都出不來。本來推想，會不會是同一部影片亂玩太多次，被 YouTube 擋掉了，哈！問題我也沒亂搞啊～這樣推論也不太合理。試了別部影片，可以正常顯示影片跟抓取字幕，所以就將範例影片多建立了幾筆，每次以亂數取用。再仔細地檢查了流程，找到問題點了！

    最近的幾支程式，像「HTML5 FUN Player」下載 YouTube 字幕，「擷取 Google 日曆製作簡明行事曆」擷取 Google 行事曆，「HTML5 FUN : PARTDLE 兜一兜」的Google試算表查詢 ......，為了解決 JavaScript 的 CORS 限制，都使用到 CORS proxy 來誇域擷取資料。類似今天 YouTube 抓不到字幕的問題，在之前其實發生過，也解決過，但我還是忘了前車之鑑。

    使用 CORS proxy 時，如果要擷取資料的網址是一樣時，要注意「快取」的問題，就像今天 YouTube 字幕的問題，當程式下載範例影片的網頁資料，因為網址都一樣的，CORS proxy 主機回傳來的網頁資料，因為「快取」的關係，都沒有更新，所以解析完的字幕設定值也是舊的，悲慘的是字幕設定的資料中帶有「有效時間」的設定，今天剛好超過了效期 (圖1)，所以 YouTube 網站的回應是找不到該字幕資料。

    [圖1] YouTube 字幕檔網址的 expire 為有效時間(已過期)

    [圖2] HTML5 FUN Player 因字幕設定過期而回報無字幕

    其實 JavaScript 設定檔快取的問題一直都在，HTML5 FUN 遊戲及工具，設定及題庫明明改過了，卻使用了舊的設定值，跟今天遇到的情形都是類似的。那要如何避免被快取呢？

    如果網址相同就會被快取，那就讓每次的網址都不一樣吧！

    底下利用時間來「搞怪」，讓網址每次都不同

    var nocache = 'nocache=' + new Date().getTime();

    上面這一行製作了一個叫「nocache」的參數，假設原來的網址是「url」，將它們合起來：

    url += (/\?/.test(url)?'&':'?') + nocache;

    如果原網址中有「?」了，就用「&」連結 nocache；反之則是用「?」來連接 nocache。

    使用加料處理過的網址，快取問題就解決了。

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

    2024年7月13日 星期六

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

    2024年7月13日 星期六

    六月底提到同事送小孩一套英文書 (詳見:雄: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: 只有音檔或是影片檔，如何自製字幕檔？
    • Q : Youtube 的影片沒有字幕檔，可以自製嗎？
    • Q: 翻譯是使用哪一個工具產生的？
      • A: 本工具是使用 Microsoft 的 Bing 翻譯來完成批次翻譯的工作。
    • Q : 可以自動載入影音嗎？
      • A: 如果在本工具的網址後上加上「 ?v=影音的網址 」 ，這樣子在程式啟動時，即可自動開啟該網址；另一個方法是將影音的網址加在字幕檔裡面，載入字幕檔案以後，會順便載入影音。
      • A: 如果在字幕檔中，將影音的網址加到字幕內容中(例如第一句字幕的下一行)，程式在載入字幕檔以後，會順便載入網址的影音。
    • 字幕檔可以放 Google 雲端硬碟嗎？
      • A: 字幕檔可以的(影音檔不行)，不過，有兩個條件：
        • 在上載到雲端硬碟之前，必須將檔名改為 .txt，改完檔名才能上載。
        • 在雲端硬碟中必須將檔案共用給「知道連結的任何人」「檢視」。
      • A: 使用時，如果在本工具的網址後上加上「 ?f=字幕檔的網址 」 ，這樣子在程式啟動時，即可自動開啟共用的字幕檔。字幕檔中如果有加入 YouTube 影片網址，也會自動載入。
    • Q : 在電腦上播放影音有快速按鍵嗎？
      • A: 在電腦中操作，除了用滑鼠，也可以使用鍵盤的按鍵
        • Esc : 播放 / 暫停。
        • F1 : 重播該句，播上一句(連按兩次)。
        • F2 : 播放下一句。

    相關連結

    更新記錄

    • 2025.08.26 將抓字幕資料網址的程序以 base64 編碼後，由 iframe 執行指令，可以像在本機一樣，避掉機器人檢查。
    • 2025.08.24 原有的抓字幕方法似乎無效了，改用另一種方法 (程序類似 Python 的這個 YouTube Transcript API)。
    • 2025.05.15 修正翻譯中斷的問題，將批次翻譯的字數下修到 700 個字，如果不能批次翻譯時，重新抓取 token；翻譯文字行識別字串中加入序號，結果的陣列以這序號當索引，解決舊方法可能產生原文和翻譯結果不匹配的問題。
    • 2025.02.14 使用 OpenCC 讓自動產生的字幕可以用簡中的自動翻譯，再轉為繁中，等 YT 的自動產字字幕無法用繁中自動翻譯的 bug 沒了，再取消。
    • 2025.02.13 YT 字幕擷取備援 bug fix；YT 第二字幕支援自動翻譯中文的選項。
    • 2025.02.05 增加一個匯出 .txt 的按鈕，匯出的檔名會是 .srt.txt ，方便在 Windows 中可以直接以記事本開啟，或以 Google Drive 分享字幕檔案；修正 lang-unknow  會有很多的狀況，必須有很多段(超過一半)都有多行才會列入；proxy 增加備援。
    • 2025.02.04 如果載入的字幕有第二行，視為另一種語言的, 用 lang-unknow? 的代碼，翻譯按鈕區會多出「預設?」的按鈕，以方便使用雙語的字幕檔案。
    • 2024.11.27 如果字幕檔中有多個影音網址，會載入第一個網址的影音，其餘的只會變一般連結。
    • 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
    閱讀全文
    By at 7 則留言:
    標籤: , , ,

    2024年7月8日 星期一

    HTML TABLE 與 DIV TABLE 貼到文件中比較

    2024年7月8日 星期一

    前幾天在幫 Google 日曆轉簡明行事曆加上「複製」的功能，可以將製作好的行事曆複製到剪貼簿中以後，再貼到 Google 文件中編輯行事曆的內容，結果發現表格全亂了套。主要是原來的表格是使用 <DIV> 的語法，再搭配 CSS diplay: table 的樣式所產生的，沒想到眼中所見的表格，複製到剪貼簿又是另一回事了。只好再乖乖地將語法通通再改回 HTML <TABLE> 的語法了。

    [圖1] 由 Google 日曆轉換的行事曆

    [圖2] DIV TABLE 貼到 Google 文件的樣子

    來做一下小實驗，底下同樣的資料內容，一個用 DIV 製作看起來像表格的表格(DIV Table)，一個用真正的表格 (TABLE)，看它們分別複製後，貼到 Google 文件中，有沒有差別？


    DIV TABLE

    A
    B
    C
    1
    2
    3

    HTML TABLE

    A B C
    1 2 3

    相關連結
    閱讀全文
    By at 沒有留言:
    標籤: ,
    訂閱： 文章 (Atom)
     
    雄::gsyan © 2009. Design by Pocket