如何用HTML和JavaScript给网站添加多首不重叠顺序播放的歌曲

你代码的核心问题有两个：

1. HTML中id属性是全局唯一的，重复使用相同id会导致document.getElementById只能匹配到第一个对应元素，所以你后续的音频和点击图标完全没有绑定事件
2. 没有全局变量记录当前正在播放的音频实例，无法实现播放新音频时停止上一个的互斥逻辑

HTML 部分 #

<!-- 第一首歌 -->
<img src="img/play-icon.jpg" alt="播放按钮" class="play-icon" width="80">
<audio class="audio-track">
  <source src="Ганвест - Кайфули.mp3" type="audio/mpeg">
</audio>

<!-- 第二首歌 -->
<img src="img/play-icon.jpg" alt="播放按钮" class="play-icon" width="80">
<audio class="audio-track">
  <source src="替换为第二首歌的实际路径.mp3" type="audio/mpeg">
</audio>

<!-- 第三首歌可以按同样结构直接新增 -->

注意：音频的type属性正确值为audio/mpeg，原代码的audio/mp3存在兼容性问题，部分浏览器可能无法识别。

JavaScript 部分 #

// 获取所有播放图标和音频
const playIcons = document.querySelectorAll('.play-icon');
const audioTracks = document.querySelectorAll('.audio-track');
// 记录当前正在播放的音频和对应图标
let currentPlayingAudio = null;
let currentActiveIcon = null;

// 遍历给每个图标绑定点击事件
playIcons.forEach((icon, index) => {
  icon.addEventListener('click', () => {
    const targetAudio = audioTracks[index];
    
    // 判断点击的是不是当前正在播放的音频
    if (targetAudio === currentPlayingAudio) {
      // 是当前播放的，直接切换暂停/播放状态
      if (targetAudio.paused) {
        targetAudio.play();
        icon.src = "img/pause-icon.png";
      } else {
        targetAudio.pause();
        icon.src = "img/play-icon.jpg";
      }
      return;
    }

    // 不是当前播放的，先停止之前播放的音频，重置图标
    if (currentPlayingAudio) {
      currentPlayingAudio.pause();
      currentActiveIcon.src = "img/play-icon.jpg";
    }

    // 播放当前点击的音频，切换图标
    targetAudio.play();
    icon.src = "img/pause-icon.png";
    // 更新当前播放的记录
    currentPlayingAudio = targetAudio;
    currentActiveIcon = icon;
  });
});

• 用class选择器批量选中所有播放图标和音频元素，通过遍历绑定事件解决单个id只能匹配第一个元素的问题
• 用两个全局变量存储当前正在播放的音频实例和对应的图标，每次点击新的播放按钮时，先停止之前播放的音频并重置其图标，再处理当前音频的播放逻辑，自然实现了互斥播放的效果
• 新增歌曲只需要按照HTML结构复用相同的class即可，不需要修改JS逻辑

内容的提问来源于stack exchange，提问作者sherzod