如何在不附加到 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 屬性，而不修改“音樂”變量（既不將其設置為 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方法加載新音頻，否則它將繼續播放舊音頻。

Answer 2

原始對象將被刪除，但僅當垃圾收集器確定它是時候。 它的audio可能使事情復雜化並使瀏覽器難以做出決定。

所以，是的，只需重新使用原始對象。

Answer 3

雖然重用 HTMLAudioElements 絕對是最好的選擇 - 為了完整性 - 你應該能夠通過清除src或srcObj來處理它：

music.srcObj = null;

這或多或少讓瀏覽器的 GC 知道該元素已准備好刪除。