網頁播放音樂滾動歌詞效果

當網頁播放音頻時，可以利用 jQuery 和 HTML 實現歌詞滾動的效果。以下是一個簡單的實現：

HTML：

<div id="lyrics">
  <p data-time="0:00.00">作詞 : 娃娃</p>
  <p data-time="0:01.00">作曲 : 陶喆</p>
  <p data-time="0:04.50">Love... Baby LoveLoveLove baby</p>
  <p data-time="0:12.78"></p>
  <p data-time="0:24.76">請原諒我有決定會讓你煩惱</p>
  <p data-time="0:29.29">你要了解並不是你追得我想逃</p>
</div>
<audio id="audio" src="your-audio-file.mp3"></audio>

jQuery：

$(document).ready(function() {
  var audio = $("#audio")[0];
  var lyricDiv = $("#lyrics");

  audio.addEventListener("timeupdate", function() {
    var currentTime = audio.currentTime;
    var lyricP = lyricDiv.find("p");

    lyricP.each(function() {
      var lyricTime = $(this).data("time");
      var lyricText = $(this).text();

      if (currentTime >= convertToSeconds(lyricTime)) {
        $(this).addClass("active").siblings().removeClass("active");
        lyricDiv.animate({scrollTop: $(this).offset().top - lyricDiv.offset().top + lyricDiv.scrollTop() - 100}, 1000);
      }
    });
  });

  function convertToSeconds(time) {
    var parts = time.split(":");
    var minutes = parseInt(parts[0], 10);
    var seconds = parseFloat(parts[1]);
    return minutes * 60 + seconds;
  }
});

CSS：

#lyrics {
  height: 400px;
  overflow: auto;
  text-align: center;
  margin: 0 auto;
}

#lyrics p.active {
  color: red;
}

解釋一下上面的代碼：

1. 首先，給每一行歌詞添加了一個 data-time 屬性，表示這一行歌詞在音頻文件中對應的時間。
2. 在 jQuery 代碼中，獲取了 audio 元素和歌詞所在的 div 元素，並添加了一個 timeupdate 事件監聽器。每當音頻播放時間更新時，該事件就會觸發。
3. 在事件監聽器中，首先獲取當前音頻播放的時間，然後遍歷每一行歌詞，判斷該行歌詞是否應該被激活（即是否應該滾動到屏幕中央）。如果是，就添加 active 類，並使用 jQuery 的 animate 方法將該行歌詞滾動到屏幕中央。
4. 最後，定義了一個輔助函數 convertToSeconds，用於將時間字符串轉換爲秒數，以便進行比較。