javascript - 如何用JavaScript控制多个音频播放器？

Question

我在同一个网页上创建两个音频播放器。

<audio id="player0">
<button id="play0" /><button id="forward0" />
<button id="backward0" /></audio> <audio id="player1">
<button id="play1" />
<button id="forward1" /><button id="backward1" />
</audio>

但是当我点击“play0”时，它们都会播放。我认为问题是我将 eventListener 绑定(bind)到一个 playbtn。有人可以告诉我如何解除 eventListener 的绑定(bind)，这样我一次只能播放一个吗？

var index = 0; 
var playbtn = document.getElementById("play-images-"+index);
var playbtn.addEventListener("click", playPause, false);
index++;

function playPause(){
    playbtn = document.getElementById("play"+index);
    if(!audio.paused && !audio.ended){
                audio.pause();
    }else{
                audio.play();
    }
}

Answer 1

这应该接近您所需要的......

HTML

<audio id="player0">
<button id="play0" />
<button id="forward0" />
<button id="backward0" />
</audio>
<audio id="player1">
<button id="play1" />
<button id="forward1" /><button id="backward1" />
</audio>

JavaScript

// init page when window loads
window.addEventListener('load', initPage, false);

function initPage() {
  // add click event to play buttons
  var btnColl = document.getElementsByTagName('button');
  for (var i = 0; i < btnColl.length; i++) {
    if (btnColl[i].id.indexOf('play')> -1) {
      btnColl[i].addEventListener('click', playPause, false);
    }
  }
}

function playPause(sender) {
  // get audio player based on button id
  var audioPlayer = document.getElementById(sender.srcElement.id.replace('play', 'player'));
  if(!audioPlayer.paused && !audioPlayer.ended){
    audioPlayer.pause();
  }else{
    audioPlayer.play();
  }
}