HTML5 : 圖形計時器

這是一個簡易的倒數計時計時器

• 在計時器左上角可設定倒數秒數，並啟動計時。
• 在計時器左下角按鈕按下後，可用語音設定並開始計時，例如：
• 1分30秒「開始計時」。
• 2分鐘「開始計時」。
• 可以自訂計時器的代號(預設代號為 timer)，透過網路來遠端控制計時器。

計時器代號：

時間設定

秒數:

提醒:

警示:

剩餘時間圓環顏色設定

一般:

提醒:

警示:

時間文字設定 【註】位置90～-90, 0 為中央

顏色:

大小:

位置:

畫面背景顏色：

指定音效：

 

To:

秒:

Timer Source: Mateusz Rybczonec - Modified by gsyan

緣起

之前想玩一下在視訊報告時，在自己的頭像上疊一個計時器，於是在網路上找到了Mateusz Rybczonec 的這個圓形的計時器：

• https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/

把這個計時器的文字位置調整到圖的底部後，讓它加入到 OBS 的「瀏覽器」元件中，再啟動 OBS 的「虛擬相機」，就能達到我要的效果，報告時，有個計時器同步顯示，滿好玩的。

[圖1] OBS 虛擬相機與 Google Meet 子母畫面中的頭像

進化

不過前面的計時器應用在 OBS 的瀏覽器元件中，有個小問題，無法控制計時器什麼時候開啟，使用時要回到 OBS 去操作。

於是我將前一陣子在玩的 HTML5 FUN 語音外掛，加了進去。打開麥克風，說：「5分鐘，計時開始」，然後計時器就開始跑了！想起來是不是很完美？哈！不過，我試了半天，在 OBS 就是無法讓我打開麥克風，然後說話！查了半天，別人說有用的方法，硬是無法用。

沒關係！我還有一招，就是利用「雄: HTML5 : remoteClick 網路遙控器」中使用的遠端遙控技術，由另一個計時器去控制 OSB 中的那個。哈！是不是很好玩！

使用方法

計時器的使用方法很簡單，在為計時器取個簡單的「代號」，例如：「myXxXx」，因為它可以被遠端控制，所以建議不要用預設的 timer 當代號，不然，如果大家都用 timer 當代號，一按啟動鈕，大家的計時器都一起連動了。

設定了自訂的計時器代號以後，就可以按「按這裡開啟計時器」的按鈕來進行計時器的畫面了。

[圖2] 計時器的控制

設定時間與開始計時

開啟計時器以後，計時器的控制方塊在畫面的左上角：

• To : 這個欄位可以指定要送控制指令給哪一個代號的計時器，預設是自己的代號。
• 秒 : 這個欄位可以輸入要倒數計時的秒數，例如： 輸入300，就是五分鐘。

設定好就可以按「開始計時」的按鈕，送出控制指令囉！

另外一個方式是直接用麥克風，以語音指令控制，可參考後面的說明。

暫停與繼續

畫面中的計時器，在計時的過程中，如果想暫停，就按一下計時器，想繼續計時，就再按一下計時器。（哈～突然想到，目前無法控制遠端計時器的暫停跟繼續）。

調整大小

計時器畫面的右下角有一個拉桿，可以用拉桿來調整計時器的大小。(2022.07.09 加入)

離開

想離開計時器，就按一下畫面右上角的叉叉圖示。

語音控制

如果瀏覽器有支援語音辨識，計時器的左下角會有 [MIC] 的圖形按鈕。想用語音來設定倒數計時的時間跟啟動計時，先按一下 [MIC] 的藍色按鈕，當它變成紅色時，就可以按以下的格式，說出計時的時間跟啟動計時的語音指令：

• 開始計時。（套用之前設定的秒數）
• ？秒鐘，開始計時。
• ？秒，開始計時。
• ？分鐘，開始計時。
• ？分？秒，開始計時。

示範影片

Q&A

• Q1 : 進入計時器的畫面後，如何更改計時器代號？
  
• A : 計時器代號只能在進入計時器前設定，所以想更改代號，只好將頁面重新整理，重頭來過。
• Q2: 如何更改音效播放及顏色變換的時間點？
• A : 請參考 Q5。
• Q3 : 將計時器加入 OBS 時，如何「去背」？
• A : 計時器的背景顏色為「#F9F9F9」，可以利用 OBS 元件裡，「濾鏡」中的「色彩鍵」，設定值：
• 「關鍵顏色」設為「#F9F9F9」。
• 「相似性」設為「1」。
• 「平滑度」設為「100」。
• Q4 : 可以在一進網頁，就自動設好計時器代號嗎？
• A : 可以的，例如，想使用「timerOBS」當作計時器的代號，在網址的後面加上「?username=timerOBS」，這樣子，每次開啟頁面，就會使用 timerOBS 當作計時器代號的預設值，而不用再行手動輸入。
• Q5 : 網址的後面除了可以加 username 來設定計時器代號，還有其它可自訂的參數嗎？
• A : 網址後的可加入的自訂參數如下：
• username : 設定計時器代號。
• time : 設定倒數計時的秒數。
• warning : 設定剩幾秒時，顯示時間快到的狀態，變「黃色」，並加入滴答的音效。
• alert : 設定剩幾秒時，變成「紅色」。

相關文章

• 雄: HTML5 : remoteClick 網路遙控器
• 雄 : HTML5 FUN 語音外掛
• 雄 : HTML5 : SVG transform-origin 與 rotate

更新記錄

• 2022.08.19 修正遠端遙控服務失效時，無法使用的問題；修正有些時間設定，導致最後剩餘時間的圓圈未變成紅色(感謝網友 Wedo 通報600秒時，有此臭蟲)；修正下次啟動時，時間終了音效未先關閉的問題。
• 2022.08.17 修正在 Safari 瀏覽器中，剩餘時間的環會因調整過大小而沒對準中央；新增設定圓環顏色、時間文字、背景顏色、載入自定結束音效檔的參數。
• 2022.07.11 可在網址中使用 time、warning、alert 的參數在自訂預設的參數。
• 2022.07.09 使用語音指令時，「兩」不會變阿拉伯數字，所以在解析時間前，先將所有的「兩」置換為「2」；原來的音效檔使用 Base64 編碼，但會使得 blogger 載入時間過長，導致首頁的文章清單只能顯示一篇，因此將音效都改用 .mp3 檔案，由 HTML5 FUN 的 github 專案提供；在畫面右下角加入調整計時器大小的拉桿。
• 2022.07.03 加入音效。
• 2022.07.02 加入遠端遙控功能。
• 2022.07.01 加入語音控制功能。
• 2022.06.31 草稿版。