javascript 如何在不附加到 DOM 的情况下正确删除 html5 音频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8864617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove properly html5 audio without appending to DOM?
提问by Jo Pango
With Javascript, I have a function that creates an audio element with createElement("audio"), and start playing in loop without using appendChild(), I mean without appending it to the DOM.
The element created is kept in a variable, let's called it music1:
使用 Javascript，我有一个函数可以创建一个带有 的音频元素createElement("audio")，并在不使用 的情况下开始循环播放appendChild()，我的意思是没有将它附加到 DOM。创建的元素保存在一个变量中，我们称之为music1：
music = document.createElement("audio");
music.addEventListener("loadeddata", function() {
music.play();
});
music.setAttribute("src", music_Source);
What I would like to do, is to change the music played, if possible using the same function, and storing the element in the same variable.
我想做的是改变播放的音乐，如果可能的话，使用相同的函数，并将元素存储在相同的变量中。
What I do is that before the code above:
我所做的是在上面的代码之前：
if(typeof(music) == "object") {
music.pause();
music = null;
}
But: if I remove music.pause(), the first music keeps playing, and the second starts playing too at the same time, which makes me think that the first music is always somewhere in the document/in the memory. Also, music = nullseems useless. I don't want to use jQuery.
但是：如果我删除music.pause()，第一首音乐继续播放，第二首音乐也同时开始播放，这让我认为第一首音乐总是在文档/内存中的某个地方。还有，music = null好像没用。我不想使用 jQuery。
Do you have any idea to properly remove the first music, delete the element, or so on?
您是否有任何想法正确删除第一首音乐，删除元素等？
Actually, kennis' comment is right, I tried to just change the src attribute, and not modify the "music" variable (neither setting it to null, nor re-creating an Element) and it seem to work too. So, for the record: For each source changing here is the function:
实际上，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);
回答by Last Rose Studios
rather than delete, the better way of doing it would be to change the src
而不是删除，更好的方法是更改 src
music.setAttribute('src',theNewSource); //change the source
music.load(); //load the new source
music.play(); //play
that way you're always dealing with the same object so you hit the DOM less often, and also you avoid your problem of having two player at the same time
这样你总是在处理同一个对象，所以你不太频繁地访问 DOM，而且你也避免了同时有两个玩家的问题
Also make sure you use the .load method to load the new audio, otherwise it will keep playing the old one.
还要确保使用 .load 方法加载新音频，否则它将继续播放旧音频。
回答by Lightness Races in Orbit
The original object would be deleted, but only when the garbage collector determines that it's time. The fact that it's audiomay complicate things and make it difficult for the browser to make that determination.
原始对象将被删除，但只有在垃圾收集器确定是时候才会删除。事实上，它audio可能会使事情复杂化，并使浏览器难以做出决定。
So, yes, just re-use the original object instead.
所以，是的，只需重新使用原始对象即可。
