如何在不附加到 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);

原文由 Jo Pango 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

而不是删除，更好的方法是更改 src

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

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

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

原文由 Last Rose Studios 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

原始对象将被删除，但只有当垃圾收集器确定是时候了。它是 audio 的事实可能会使事情复杂化并使浏览器难以做出该决定。

所以，是的，只需重新使用原始对象即可。

原文由 Lightness Races in Orbit 发布，翻译遵循 CC BY-SA 3.0 许可协议