返回

音乐播放器2--歌词高亮滚动：让听歌成为一种视觉盛宴

前端

在数字音乐时代，音乐播放器早已成为我们生活中不可或缺的一部分。随着技术的发展，音乐播放器也在不断更新换代，从简单的播放功能到丰富的可视化效果，音乐播放器为我们带来了更沉浸、更享受的听觉体验。

歌词高亮滚动是音乐播放器中一项非常受欢迎的功能。当音乐播放时，歌词会随着音乐的节奏向上滚动，当前播放的歌词会被高亮显示，这不仅让听歌变得更加有趣，也方便了我们跟着歌词一起唱。

实现歌词高亮滚动并不难，这里我们将使用 JavaScript 和 CSS 来实现这一功能。首先，我们需要创建一个 HTML 文件，其中包含一个音乐播放器和一个歌词容器。音乐播放器负责播放音乐，歌词容器负责显示歌词。

<html>
<head>
  
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div id="music-player">
    <audio src="music.mp3"></audio>
    <div id="play-pause-button"></div>
    <div id="progress-bar"></div>
  </div>
  <div id="lyrics-container">
    <ul id="lyrics">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</body>
</html>

接下来，我们需要编写 JavaScript 代码来控制音乐的播放和歌词的滚动。首先，我们需要获取音乐播放器和歌词容器的 DOM 元素。

const musicPlayer = document.getElementById('music-player');
const lyricsContainer = document.getElementById('lyrics-container');

然后，我们需要添加一个事件监听器，监听音乐播放器的播放事件。当音乐播放时，我们开始歌词滚动。

musicPlayer.addEventListener('play', () => {
  startLyricsScrolling();
});

在 startLyricsScrolling() 函数中，我们需要获取当前播放的歌词并将其高亮显示。同时，我们需要计算歌词滚动的速度，并根据音乐的播放进度调整歌词的位置。

function startLyricsScrolling() {
  const currentLyric = getCurrentLyric();
  highlightCurrentLyric(currentLyric);

  const lyricsSpeed = calculateLyricsSpeed();
  const progress = musicPlayer.currentTime / musicPlayer.duration;
  const lyricsPosition = progress * lyricsSpeed;

  lyricsContainer.scrollTop = lyricsPosition;

  requestAnimationFrame(startLyricsScrolling);
}

最后，我们需要编写 CSS 代码来设置歌词容器的样式和滚动条的样式。

#lyrics-container {
  width: 100%;
  height: 200px;
  overflow-y: auto;
}

#lyrics {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#lyrics li {
  font-size: 16px;
  line-height: 24px;
}

#lyrics li.current {
  background-color: #f0f0f0;
}

以上代码只是实现歌词高亮滚动的基本功能，您还可以根据自己的需要添加更多功能，比如歌词同步、歌词搜索、歌词翻译等。