Javascript 按键暂停并播放音频

我正在开发一个音频播放器，我希望人们能够使用空格键播放和暂停音乐。我让它工作。不幸的是，该脚本只在第一个播放器上运行（当有人单击歌曲时，会在屏幕顶部加载一个播放器部分）。所以一旦第一部分消失了。它的播放和暂停功能不再工作。任何建议

$(document).keydown(function(event) {
  if (event.keyCode == 32) {
    if (!mytrack.paused && !mytrack.ended) {
      mytrack.pause();
      play.innerHTML = "<i class='fa fa-play'></i>";
      window.clearInterval(updateTime);
    } else {
      mytrack.play();
      play.innerHTML = "<i class='fa fa-pause'></i>";
      updateTime = setInterval(update, 500);
    }
    return false;
  }
});  

$（文档）.keydown（函数（事件）{
如果（event.keyCode==32）{
如果（！mytrack.paused&！mytrack.end）{
mytrack.pause（）；
play.innerHTML=“”；
clearInterval（updateTime）；
}否则{
mytrack.play（）；
play.innerHTML=“”；
updateTime=setInterval（更新，500）；
}
返回false；
}
});  

---

完整代码

    var mytrack = document.getElementById("sound");
var play = document.getElementById("play");
var currentTime = document.getElementById("current-time");
var totalTime = document.getElementById("total-time");
var defaultBar = document.getElementById("default-bar");
var progressBar = document.getElementById("progress-bar");
var barSize;

defaultBar.addEventListener('click', clickedBar, false);

mytrack.addEventListener('loadedmetadata', function () {
  mytrack.play();
  updateTime = setInterval(update, 500);
  play.innerHTML = "<i class='fa fa-pause'></i>";
  var minutes = parseInt(mytrack.duration / 60);
  var seconds = parseInt(mytrack.duration % 60);
  if (seconds < 10) {
    totalTime.innerHTML = minutes + ":0" + seconds;
  } else {
    totalTime.innerHTML = minutes + ":" + seconds;
  }
});

function playOrPause() {
  if (!mytrack.paused && !mytrack.ended) {
    mytrack.pause();
    play.innerHTML = "<i class='fa fa-play'></i>";
    window.clearInterval(updateTime);
  } else {
    mytrack.play();
    play.innerHTML = "<i class='fa fa-pause'></i>";
    updateTime = setInterval(update, 500);
  }
}

function update() {
  if(!mytrack.ended) {
    // CURRENT TIME TO READABLE TIME
    var minutes = parseInt(mytrack.currentTime / 60);
    var seconds = parseInt(mytrack.currentTime % 60);
    if (seconds < 10) {
      currentTime.innerHTML = minutes + ":0" + seconds;
    } else {
      currentTime.innerHTML = minutes + ":" + seconds;
    }
    // BAR
    var progressBarSize = parseInt(mytrack.currentTime * barSize /mytrack.duration);
    progressBar.style.width = progressBarSize + "px";
    barSize = defaultBar.offsetWidth;
  } else {
    currentTime.innerHTML = "0:00";
    play.innerHTML = "<i class='fa fa-play'></i>";
    // Bar
    progressBar.style.width = "0px";
    // TIMER
    window.clearInterval(updateTime);
  }
}

function clickedBar(e) {
  if(!mytrack.ended) {
    var mouseX = e.pageX - defaultBar.offsetLeft;
    var newTime = mouseX * mytrack.duration/barSize;
    mytrack.currentTime = newTime;
    progressBar.style.width = mouseX + "px";
  }
} 

var mytrack=document.getElementById（“声音”）；
var play=document.getElementById（“play”）；
var currentTime=document.getElementById（“当前时间”）；
var totalTime=document.getElementById（“总时间”）；
var defaultBar=document.getElementById（“默认栏”）；
var progressBar=document.getElementById（“进度条”）；
变量大小；
defaultBar.addEventListener（'click'，clickedBar，false）；
mytrack.addEventListener（'loadedmetadata'，函数（）{
mytrack.play（）；
updateTime=setInterval（更新，500）；
play.innerHTML=“”；
var minutes=parseInt（mytrack.duration/60）；
var seconds=parseInt（mytrack.duration%60）；
如果（秒<10）{
totalTime.innerHTML=分钟+“：0”+秒；
}否则{
totalTime.innerHTML=分钟+“：”+秒；
}
});
函数playOrPause（）{
如果（！mytrack.paused&！mytrack.end）{
mytrack.pause（）；
play.innerHTML=“”；
clearInterval（updateTime）；
}否则{
mytrack.play（）；
play.innerHTML=“”；
updateTime=setInterval（更新，500）；
}
}
函数更新（）{
如果（！mytrack.end）{
//当前时间到可读时间
var minutes=parseInt（mytrack.currentTime/60）；
var seconds=parseInt（mytrack.currentTime%60）；
如果（秒<10）{
currentTime.innerHTML=分钟+“：0”+秒；
}否则{
currentTime.innerHTML=分钟+“：”+秒；
}
//酒吧
var progressBarSize=parseInt（mytrack.currentTime*barSize/mytrack.duration）；
progressBar.style.width=progressBarSize+“px”；
barSize=defaultBar.offsetWidth；
}否则{
currentTime.innerHTML=“0:00”；
play.innerHTML=“”；
//酒吧
progressBar.style.width=“0px”；
//计时器
clearInterval（updateTime）；
}
}
功能点击条（e）{
如果（！mytrack.end）{
var mouseX=e.pageX-defaultBar.offsetLeft；
var newTime=mouseX*mytrack.duration/barSize；
mytrack.currentTime=newTime；
progressBar.style.width=mouseX+“px”；
}
} 

您的

mytrack

在开始时设置一次

var mytrack = document.getElementById("sound");

在使用应用程序的过程中，如果放置了一个“新播放器”，使得

mytrack

不再位于DOM中，那么您对

mytrack

的引用现在指向一个不再有用的音频元素

您或者不需要替换

mytrack

，而是动态更改src，以便

mytrack

保留在DOM中，或者根据需要更新对音频元素的引用

这可以像更新

mytrack=document.getElementById（“无论新音频元素的id是什么”）一样简单在替换它之后，或在尝试与它交互之前动态查找它

简而言之，闭包保留了对
mytrack
的引用，并将始终尝试使用它。你的工作是确保它仍然有用，或者替换它

EDIT只是查看了所有扩展的代码，并注意到您正在将侦听器附加到
myTrack
。从DOM中删除
myTrack
时，需要将每个
AddEventListener
与相应的
removeEventListener
配对，以避免内存泄漏

您可能希望将所有“开始观察播放机时要执行的代码”移动到一个函数中，以便可以将其用于您设置的每个音频播放机。事件委托，在更高的层次上倾听事件，并不是你真正想要的，因为大多数HTML5媒体事件都不是泡沫

一旦代码被隔离，您还需要一个集合来对删除音频元素做出反应

请记住，
addEventListener
和
removeEventListener
期望在相同的事件阶段，使用相同的处理程序，针对相同的事件类型，在相同的元素上调用。这通常会让不熟悉流程的人绊倒，并将他们直接发送到元素上的设置
oneded
。但并没有那么复杂。关于
removeEventListener
“不工作”，这里有很多问题可以解释。
在哪里/何时创建
myTrack
？如果这是你的第一个玩家，然后你创建了更多，那么你现在拥有的处理程序只知道
myTrack
我会用完整的玩家代码编辑帖子。玩家被加载到一个部分。所以一次只有一个玩家在页面上。单击新歌时，上一首歌将消失。谢谢你的评论！可能是因为您正在将单击事件侦听器绑定到第一个部分，但是一旦第一个部分消失，事件就不会绑定到第二个部分（播放器），如果这有意义的话。有一个函数可以在下一个玩家加载后重新绑定它。这也有助于查看。