网页播放音乐滚动歌词效果

当网页播放音频时，可以利用 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，用于将时间字符串转换为秒数，以便进行比较。