HTML中两个按钮无法独立播放不同歌曲的问题求助

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

• 两个<script>块里都声明了全局变量aud和isPlaying，第二次声明会直接覆盖第一次的，所以不管点哪个按钮，实际操作的都是第二个音频。
• 两个函数都叫playPause，后面定义的函数会替换前面的，所有按钮点击都会执行第二个函数，自然只能控制同一首歌。

把播放逻辑改成每个按钮独立关联自己的音频，不用全局变量，而是通过点击事件获取当前按钮下的音频元素，同时给每个音频单独维护播放状态。

修改后的完整代码如下：

<!-- BTN1-->
<button id="ASong" onClick="playPause(this)">
  <audio
    src="mp3/Persona_5_OST-_Beneath_the_Mask_(getmp3.pro).mp3"
    loop
  ></audio>
  <img src="img/musica2.png" width="100px" align="left" style="margin-top:40px">
  <br/>
</button>

<!-- BTN2-->
<button id="ASong2" onClick="playPause(this)">
  <audio
    src="mp3/Persona_5_OST_-_Beneath_the_Mask_r_(getmp3.pro).mp3"
    loop
  ></audio>
  <img src="img/musica2.png" width="100px" align="left" style="margin-top:40px">
  <br/>
</button>

<script>
function playPause(btn) {
  // 获取当前按钮下的音频元素
  const aud = btn.querySelector('audio');
  // 用音频元素的自定义属性存播放状态，避免全局变量冲突
  const isPlaying = aud.dataset.isPlaying === 'true';
  
  if (isPlaying) {
    aud.pause();
    aud.dataset.isPlaying = 'false';
  } else {
    aud.play();
    aud.dataset.isPlaying = 'true';
  }
}

// 页面加载后默认暂停所有音频
document.querySelectorAll('audio').forEach(aud => {
  aud.pause();
  aud.dataset.isPlaying = 'false';
});
</script>

• 给onClick传this，让函数直接拿到被点击的按钮元素。
• 用btn.querySelector('audio')获取当前按钮对应的音频，不再依赖全局变量。
• 用音频元素的dataset.isPlaying存播放状态，每个音频独立维护自己的状态，不会互相干扰。
• 合并重复的<script>块，避免函数覆盖问题。
• 修复了margin-top的写法（原来的属性写法不符合规范，改成内联样式）。
• 去掉autoplay属性，避免浏览器自动播放限制导致的异常。

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