javascript - 如何在不附加到 DOM 的情况下正确删除 html5 音频？

Question

使用 Javascript，我有一个使用 createElement("audio") 创建音频元素的函数，并开始循环播放而不使用 appendChild()，我的意思是无需将其附加到 DOM。 创建的元素保存在一个变量中，我们称它为 music1:

music = document.createElement("audio");
 music.addEventListener("loadeddata", function() {
 music.play();
});
music.setAttribute("src", music_Source);

我想做的是改变播放的音乐，如果可能的话使用相同的函数，并将元素存储在相同的变量中。

我做的是在上面的代码之前:

if(typeof(music) == "object") {
 music.pause();
 music = null;
}

但是:如果我删除 music.pause()，第一首音乐会继续播放，第二首音乐也会同时开始播放，这让我觉得第一首音乐总是在某个地方文档/内存中。此外，music = null 似乎没有用。我不想使用 jQuery。

您有什么想法可以正确删除第一首音乐、删除元素等吗？

实际上，kennis 的评论是正确的，我尝试只更改 src 属性，而不修改“music”变量(既不将其设置为 null，也不重新创建元素)，它似乎也有效。因此，记录在案:对于此处更改的每个源，函数是:

if(typeof(music) != "object") {
  //audio element does not exist yet:
  music = document.createElement("audio");
  music.addEventListener("loadeddata", function() {
    music.play();
  });
}
music.setAttribute("src", music_Source);

Answer 1

与其删除，更好的方法是更改​​ src

music.setAttribute('src',theNewSource); //change the source
music.load(); //load the new source
music.play(); //play

这样你总是在处理同一个对象，这样你就不会经常点击 DOM，也可以避免同时有两个玩家的问题

还要确保使用 .load 方法加载新音频，否则它会继续播放旧音频。