如何使用不同的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返回单个元素(如果找到)。

解决这个问题的一个方法是给每一对button/audio元素不同的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")
);