网页添加多首音频后无法独立播放的问题求助

我正在为自己的网站做一个音乐页面，想要添加多首歌曲，但点击播放按钮时只会播放其中一首。我试过用逗号分隔、重命名id，甚至不做任何分隔，但还是无法正确播放对应的歌曲。

这是我目前的代码（可以看到我写了Asong和Bsong），完全搞不懂为什么它们还是会混在一起？如果有人能帮我修改代码，我会非常感激！谢谢！

这种情况大概率是按钮和音频元素的关联逻辑出了问题——要么是共用了同一个音频对象，要么是点击事件没正确绑定到对应歌曲上。我给你两种可行的修改方案，你可以根据需求选择：

方案一：每个按钮对应独立的音频元素 #

这种方式逻辑最直观，适合歌曲数量不多的场景，每首歌都有自己的<audio>标签，互不干扰：

<div>
  <!-- 歌曲A的播放按钮与音频 -->
  <button class="music-btn" data-audio="audio-A">播放歌曲A</button>
  <audio id="audio-A" src="你的Asong文件路径.mp3"></audio>

  <!-- 歌曲B的播放按钮与音频 -->
  <button class="music-btn" data-audio="audio-B">播放歌曲B</button>
  <audio id="audio-B" src="你的Bsong文件路径.mp3"></audio>
</div>

<script>
// 获取所有播放按钮
const allButtons = document.querySelectorAll('.music-btn');

allButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮对应的音频元素
    const targetAudio = document.getElementById(this.dataset.audio);
    
    // 先暂停其他所有音频，避免多首歌同时播放
    document.querySelectorAll('audio').forEach(audio => {
      if (audio !== targetAudio) {
        audio.pause();
        audio.currentTime = 0; // 重置到开头
      }
    });

    // 切换当前音频的播放/暂停状态
    if (targetAudio.paused) {
      targetAudio.play();
      this.textContent = '暂停歌曲A'; // 记得根据歌曲修改文本
    } else {
      targetAudio.pause();
      this.textContent = '播放歌曲A';
    }
  });
});
</script>

方案二：共用一个音频元素，动态切换歌曲源 #

如果你的歌曲数量比较多，用这种方式可以减少DOM元素，通过切换音频的src属性来播放不同歌曲：

<div>
  <button class="music-btn" data-src="你的Asong文件路径.mp3">播放歌曲A</button>
  <button class="music-btn" data-src="你的Bsong文件路径.mp3">播放歌曲B</button>
  <!-- 共用的音频容器 -->
  <audio id="shared-audio"></audio>
</div>

<script>
const sharedAudio = document.getElementById('shared-audio');
const allButtons = document.querySelectorAll('.music-btn');

allButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    const songSrc = this.dataset.src;

    // 如果点击的是当前正在播放的歌曲，切换播放/暂停
    if (sharedAudio.src.includes(songSrc)) {
      if (sharedAudio.paused) {
        sharedAudio.play();
        this.textContent = '暂停';
      } else {
        sharedAudio.pause();
        this.textContent = `播放${this.textContent.replace('暂停', '')}`;
      }
    } else {
      // 切换到新歌曲并播放
      sharedAudio.src = songSrc;
      sharedAudio.play();
      // 重置所有按钮的文本为“播放XX”
      allButtons.forEach(b => b.textContent = `播放${b.textContent.replace('暂停', '').replace('播放', '')}`);
      this.textContent = '暂停';
    }
  });
});
</script>

你只需要把代码里的你的Asong文件路径.mp3这类替换成你实际的歌曲文件地址就行，两种方案都能解决你现在的问题～

备注：内容来源于stack exchange，提问作者Lego Bricks