原生 JavaScript 实现流畅歌词滚动

2023-12-19 11:53:17

随着流媒体音乐的普及，歌词的同步显示变得至关重要。原生 JavaScript 提供了强大的功能，可轻松实现流畅的歌词滚动效果。在本篇文章中，我们将深入探讨如何在 HTML 和 JavaScript 的帮助下，构建一个能够随着音乐播放自动滚动的歌词面板。

布局准备：CSS 出场

在使用 JavaScript 进行滚动效果之前，我们需要先用 CSS 构建布局。我们的目标是让音频元素和歌词面板水平居中，如下所示：

<div class="container">
  <h5 id="audio">
    <audio src="song.mp3"></audio>
  </h5>
  <div id="lyrics-container">
    <p id="lyrics"></p>
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#audio,
#lyrics-container {
  width: 100%;
  max-width: 600px;
}

#lyrics-container {
  height: 300px;
  overflow: hidden;
}

#lyrics {
  white-space: nowrap;
}

JavaScript 上场：同步歌词与音频

现在是时候让 JavaScript 发挥魔力了。我们创建一个函数 scrollLyrics，它将接收歌词和音频元素作为参数。然后，我们使用 requestAnimationFrame 循环来同步歌词的滚动速度与音频播放进度。

const scrollLyrics = (lyrics, audio) => {
  // 获取歌词容器的宽度
  const lyricsContainer = document.getElementById("lyrics-container");
  const lyricsWidth = lyricsContainer.offsetWidth;

  // 随着音频播放，更新歌词位置
  const updateLyrics = () => {
    // 获取当前播放时间
    const currentTime = audio.currentTime;

    // 计算歌词滚动所需的偏移量
    const scrollOffset = currentTime * lyricsWidth / audio.duration;

    // 设置歌词容器的滚动位置
    lyricsContainer.scrollLeft = scrollOffset;

    // 继续循环更新歌词位置
    requestAnimationFrame(updateLyrics);
  };

  // 开始歌词滚动循环
  updateLyrics();
};

使用示例：让歌词动起来

现在我们有了 scrollLyrics 函数，是时候把它付诸实践了。在页面加载时，我们可以使用以下代码获取歌词和音频元素，并启动歌词滚动：

window.addEventListener("load", () => {
  const lyrics = document.getElementById("lyrics").innerText;
  const audio = document.getElementById("audio");

  scrollLyrics(lyrics, audio);
});