# 總覽

# Goal

輕鬆地回顧和整理過去的歌回內容,快速找到直播中的精華部分。

# Information

Name歌枠回顧工具
Day created2024
Day modified2024/9/3
AuthorBenjamin Yang (太陽餅)
LanguageHTML , CSS , Javascript

點我跳過工具介紹


# 工具介紹

# 製作動機

此工具的誕生係因為當初看到自己的 YT 稍後觀看有接近 100 部的 歌枠 ,如果每部都要手動補檔的話,勢必會花費許多時間。而且我發現許多歌枠的留言區都會有熱心的粉絲提供時間戳記,所以我就想說可以借助這些標記來達到節省時間之效。

# 工具概述

您是否曾經有這樣的經驗:在聽完一首歌曲後,總是得放下手邊的工作,然後滑動至留言區,點擊下一個時間點以聆聽接下來的歌曲呢?
這個網頁程式是一個 歌枠 播放工具,專門提供給想要補檔聽歌,卻沒什麼時間的人,或是覺得每首歌都要手動按時間戳記有點麻煩的人使用。
您只需要 時間戳記影片網址 即可方便地使用本工具。

# 特色功能

  • 🎵 歌曲連播:一首歌會播 4 分鐘整,播完會直接跳到下一首歌的位置,省下手動點擊的麻煩。
  • 🕒 時間紀錄:此頁面會記錄您聆聽所有歌曲的時長,並在最後一首歌曲播完後顯示您成功節省的時長。
  • 🌟 簡單易用:只需兩步驟即可!
    1. 先輸入想看的時間
    2. 再來填上影片的連結
    3. Done!

# 開始使用

請點右側連結進入: 歌枠回顧工具

# 觀看效果 demo

請點擊頁面右下角的 載入範例 按鈕,即可觀看範例 demo。


# 基本操作

# 輸入時間戳記

請於左欄輸入您想聽的時間點,您有以下三種方法可以選擇:

  1. 用複製的:在影片下方的留言區複製時間戳記,例如
    1. 0:04:39 ふわふわ時間 / 桜高軽音部   『けいおん!』 劇中歌
    2. 0:12:36 This game / 鈴木このみ   『ノーゲーム・ノーライフ』 OP
    3. 1:20:41 Catch the Moment / LiSA
    
    or
    02:03 美少女無罪♡パイレーツ | Bishoujyo Muzai♡Pirates
    06:57 エゴロック | Ego Rock
    10:20 感電 | Electric Shock 
    
  2. 手動輸入:例如
    0:04:39, 0:12:36, 1:20:41
    
  3. 輸入 0 表示從頭開始播放

輸入完成後,按下 Add 按鈕即可新增時間點,若還有想輸入的時間點,可在影片播放前繼續輸入。
影片開始播放後,恕無法再進行新增。

注意

  • 方法一和方法二輸入時間的時候,只能含有開始的時間。
  • 時間的格式只能為以下幾種: hh:mm:ss or h:mm:ss or h:m:ss or mm:ss or m: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 新增 顯示省下的時間 功能
  • 2024.2.2
    • V1.1 新增 輸入範例 功能
  • 2024.2.5
    • V1.3 新增 快轉到下首歌曲 功能
  • 2024.8.27
    • V2 介面 UI 重構
    BeforeAfter