如何在不附加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.

您是否有任何想法正确删除第一首音乐,删除元素等？

实际上,肯尼斯的评论是正确的,我试图改变src属性,而不是修改"音乐"变量(既不设置为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方法加载新音频,否则它将继续播放旧音频.