如何使用不同的SRC切换多个播放/暂停按钮

Question

我的游戏/暂停按钮正在面临一些问题。在YM HTML中，我有多个具有不同来源的按钮：

<div>
 <button class="button-53" id="button">Play</button>
</div>

<audio id="player">
  <source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>

<div>
 <button class="button-53" id="button">Play</button>
</div>

<audio id="player">
  <source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>

这是我的JavaScript：

var buttons = document.getElementById("button");
var music = document.getElementById("player");

for (const buttons of button) {
buttons.addEventListener("click", function(){
  if(music.paused){
    music.play();
    buttons.innerHTML = "Pause";
  } else {
    music.pause();
    buttons.innerHTML = "Play";
  }

});
}

但是，当我从第一个按钮播放音乐然后暂停它时，请转到下一个按钮并切换按钮，声音从我的位置开始播放。停止它，而不是从书面源播放声音。

这里有人可以帮助我吗？

Answer 1

HTML中的ID属性应该是唯一的。 document.getElementById返回一个元素（如果找到）。

解决问题的一种解决方案是给出每对按钮/音频元素不同的ID，例如

<div>
 <button class="button-53" id="button1">Play</button>
</div>

<audio id="player1">
  <source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>

<div>
 <button class="button-53" id="button2">Play</button>
</div>

<audio id="player2">
  <source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>

，为每对添加事件侦听器：

function addListeners(buttonElement, audioElement) {
    // ...add implementation
}

addListeners(
    document.getElementById("button1"),
    document.getElementById("player1")
);
addListeners(
    document.getElementById("button2"),
    document.getElementById("player2")
);