我的播放/暂停按钮遇到了一些问题。在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";
}
});
}
但是当我从第一个按钮播放音乐,然后暂停它,转到下一个按钮并切换按钮时,声音继续从我停止它的位置播放,而不是从写入的源播放声音。
这里有人能帮我吗?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")
);