js带播放列表音乐播放器代码

以下是一个简单的带有播放列表的音乐播放器的 JavaScript 代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音乐播放器</title>
</head>

<body>
  <audio id="audioPlayer" controls></audio>
  <ul id="playlist">
    <li data-src="song1.mp3">歌曲 1</li>
    <li data-src="song2.mp3">歌曲 2</li>
    <li data-src="song3.mp3">歌曲 3</li>
  </ul>

  <script>
    const audioPlayer = document.getElementById('audioPlayer');
    const playlist = document.getElementById('playlist');
    let currentSongIndex = 0;

    function loadSong(index) {
      const song = playlist.children[index];
      audioPlayer.src = song.getAttribute('data-src');
      audioPlayer.load();
      audioPlayer.play();
    }

    playlist.addEventListener('click', (event) => {
      if (event.target.tagName === 'LI') {
        currentSongIndex = Array.from(playlist.children).indexOf(event.target);
        loadSong(currentSongIndex);
      }
    });

    audioPlayer.addEventListener('ended', () => {
      currentSongIndex++;
      if (currentSongIndex >= playlist.children.length) {
        currentSongIndex = 0;
      }
      loadSong(currentSongIndex);
    });
  </script>
</body>

</html>

基础概念：