HTML/CSS/JS音乐播放器与播放列表功能实现求助

完整HTML结构 #

<!-- 播放控制按钮 -->
<button class="button--play" id="playPauseBtn">
  <i class="ph-play"></i>
</button>

<!-- 音频元素（可通过CSS设置隐藏） -->
<audio id="audioPlayer" src=""></audio>

<!-- 播放列表 -->
<ul id="playlist">
  <li data-src="path/to/dangerous-woman.mp3">Dangerous Woman</li>
  <li data-src="path/to/another-song.mp3">另一首歌曲</li>
</ul>

完善后的JavaScript代码 #

// 获取核心DOM元素
const playPauseBtn = document.getElementById('playPauseBtn');
const audioPlayer = document.getElementById('audioPlayer');
const playlistItems = document.querySelectorAll('#playlist li');

// 重置按钮为初始播放状态
function resetBtnToPlay() {
  playPauseBtn.classList.remove('button--pause');
  playPauseBtn.classList.add('button--play');
  playPauseBtn.innerHTML = '<i class="ph-play"></i>';
}

// 将按钮切换为暂停状态
function setBtnToPause() {
  playPauseBtn.classList.remove('button--play');
  playPauseBtn.classList.add('button--pause');
  playPauseBtn.innerHTML = '<i class="ph-pause"></i>';
}

// 播放列表项点击事件处理
playlistItems.forEach(item => {
  item.addEventListener('click', () => {
    const targetSongSrc = item.getAttribute('data-src');
    // 点击当前正在播放的歌曲，直接切换播放状态
    if (audioPlayer.src.includes(targetSongSrc) && !audioPlayer.paused) {
      audioPlayer.pause();
      resetBtnToPlay();
      return;
    }
    // 加载并播放新歌曲
    audioPlayer.src = targetSongSrc;
    audioPlayer.play();
    setBtnToPause();
  });
});

// 播放/暂停按钮点击事件处理
playPauseBtn.addEventListener('click', () => {
  if (audioPlayer.paused) {
    // 若未选择过歌曲，默认播放列表第一首
    if (!audioPlayer.src) {
      const firstSongSrc = playlistItems[0].getAttribute('data-src');
      audioPlayer.src = firstSongSrc;
    }
    audioPlayer.play();
    setBtnToPause();
  } else {
    audioPlayer.pause();
    resetBtnToPlay();
  }
});

// 歌曲播放结束后自动重置按钮状态
audioPlayer.addEventListener('ended', resetBtnToPlay);

关键逻辑说明 #

• 初始状态保障：通过resetBtnToPlay函数确保页面加载完成后，按钮默认显示button--play类与ph-play图标。
• 播放列表交互：点击列表项时先判断是否为当前播放歌曲，是则直接切换暂停状态；否则加载新歌曲并同步更新按钮为暂停样式。
• 按钮状态联动：点击按钮时根据音频当前的播放/暂停状态执行对应操作，同时更新按钮的类名与图标。
• 播放结束处理：监听音频ended事件，歌曲播放完毕后自动将按钮重置为初始状态。

内容的提问来源于stack exchange，提问作者Wm. Cole Hanson II