# 總覽
# Goal
輕鬆地回顧和整理過去的歌回內容,快速找到直播中的精華部分。
# Information
Name | 歌枠回顧工具 |
Day created | 2024 |
Day modified | 2024/9/3 |
Author | Benjamin Yang (太陽餅) |
Language | HTML , CSS , Javascript |
點我跳過工具介紹
# 工具介紹
# 製作動機
此工具的誕生係因為當初看到自己的 YT 稍後觀看有接近 100 部的 歌枠
,如果每部都要手動補檔的話,勢必會花費許多時間。而且我發現許多歌枠的留言區都會有熱心的粉絲提供時間戳記,所以我就想說可以借助這些標記來達到節省時間之效。
# 工具概述
您是否曾經有這樣的經驗:在聽完一首歌曲後,總是得放下手邊的工作,然後滑動至留言區,點擊下一個時間點以聆聽接下來的歌曲呢?
這個網頁程式是一個 歌枠
播放工具,專門提供給想要補檔聽歌,卻沒什麼時間的人,或是覺得每首歌都要手動按時間戳記有點麻煩的人使用。
您只需要 時間戳記
和 影片網址
即可方便地使用本工具。
# 特色功能
- 🎵 歌曲連播:一首歌會播 4 分鐘整,播完會直接跳到下一首歌的位置,省下手動點擊的麻煩。
- 🕒 時間紀錄:此頁面會記錄您聆聽所有歌曲的時長,並在最後一首歌曲播完後顯示您成功節省的時長。
- 🌟 簡單易用:只需兩步驟即可!
- 先輸入想看的時間
- 再來填上影片的連結
- Done!
# 開始使用
請點右側連結進入: 歌枠回顧工具
# 觀看效果 demo
請點擊頁面右下角的 載入範例
按鈕,即可觀看範例 demo。
# 基本操作
# 輸入時間戳記
請於左欄輸入您想聽的時間點,您有以下三種方法可以選擇:
- 用複製的:在影片下方的留言區複製時間戳記,例如
or1. 0:04:39 ふわふわ時間 / 桜高軽音部 『けいおん!』 劇中歌 2. 0:12:36 This game / 鈴木このみ 『ノーゲーム・ノーライフ』 OP 3. 1:20:41 Catch the Moment / LiSA
02:03 美少女無罪♡パイレーツ | Bishoujyo Muzai♡Pirates 06:57 エゴロック | Ego Rock 10:20 感電 | Electric Shock
- 手動輸入:例如
0:04:39, 0:12:36, 1:20:41
- 輸入
0
表示從頭開始播放
輸入完成後,按下 Add
按鈕即可新增時間點,若還有想輸入的時間點,可在影片播放前繼續輸入。
影片開始播放後,恕無法再進行新增。
注意
- 方法一和方法二輸入時間的時候,只能含有開始的時間。
- 時間的格式只能為以下幾種:
hh:mm:ss
orh:mm:ss
orh:m:ss
ormm:ss
orm:ss
,不過輸入時可以任意組合。 - 輸入
0
時請不要輸入其他任何字元。 - 時間先後順序不拘。
- 音樂會一首一首的按照順序播放,而現正播放的音樂片段會被標示出來。
# 輸入影片網址
請於右欄輸入您想聽的歌回網址,接著按下 GO!
按鈕即可。
# 跳到下一首
如果想要提早跳到下一首歌曲,請點擊 快轉到下首歌曲
按鈕。
# 變更影片
請點擊網頁下方的 變更影片
按鈕來輸入下一部歌回影片。
# FAQ
# 一首歌會播放多久?
一般來說,大多數流行歌曲的時間長度約在 3分30秒
~ 4分30秒
之間,抓大約值 4分鐘
,目的是希望在節省到時間的前提下,能夠盡量不要跳過唱歌的部分。
P.S.: 原本是設定 4分30秒
,但是經過測試後,大部分歌曲在 歌枠
時都不會到那麼長 (推測是因為卡拉 OK 版本的長度關係),所以改為 4分鐘
。
# 影片連結有什麼限制嗎?
影片連結僅限 Youtube 平台,基本上所有的連結格式皆有效 (含 Youtube Music 等)。
# 可以一次輸入多部影片嗎?
不行,若您要觀看下一部影片,請點擊頁面下方之 變更影片
按鈕來接續收看 (聽) 下一部影片。
# 為什麼沒有正確跳到下一首歌的時間點?
可能是因為您已快轉或按到超過歌曲結束時間 (即開始時間 + 4 分鐘) 的進度條,導致 youtube 方的程式執行出現錯誤,請按 變更影片
按鈕重新輸入。如果您想提早跳到下一首歌曲,請點擊 快轉到下首歌曲
按鈕。
# Reference
- Get time by regex
- Get youtube video ID by URL
版本紀錄
- 2024.1.31
- V1 基本功能完成
- 2024.2.1
- V1.2 新增
顯示省下的時間
功能
- V1.2 新增
- 2024.2.2
- V1.1 新增
輸入範例
功能
- V1.1 新增
- 2024.2.5
- V1.3 新增
快轉到下首歌曲
功能
- V1.3 新增
- 2024.8.27
- V2 介面 UI 重構
Before After