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

Posted 2023-02-25

【中文标题】如何在不附加到 DOM 的情况下正确删除 html5 音频？

【英文标题】：How do I remove properly html5 audio without appending to DOM?

【发布时间】：2012-01-14 19:05:50

【问题描述】：

使用 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);

【问题讨论】：

您已经回答了您的问题！ music.pause() 在删除对象之前。

当您准备好开始新歌时，您是否有理由不想只更改“src”属性？

@kennis 实际上，music.setAttribute("src", music_Source); 再次调用了第二首音乐的新 music_Source，所以我想这就是你的意思，我更改了 src 属性。 @Francis Avila但我并不相信music.pause() 在删除之前允许以任何适当的方式“删除”以前的音乐。或者也许我错过了什么，或者我解释得不够清楚:)

【参考方案1】：

与其删除，更好的方法是更改​​源代码

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

这样你总是在处理同一个对象，因此你访问 DOM 的频率降低了，而且你也避免了同时拥有两个玩家的问题

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

【讨论】：

实际上它似乎在没有 load() 的情况下工作，以前的音乐停止，新的开始播放。似乎在更改源时音乐开始加载（至少在 Chrome 上，因为我在一个特定于 webkit 的应用程序上工作）。但是换源确实是解决办法。

【参考方案2】：

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

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

【参考方案3】：

虽然重用 htmlAudioElements 绝对是最好的选择 - 为了完整性 - 你应该能够通过清除 src 或 srcObj 来处理它：

music.srcObj = null;

这或多或少让浏览器的 GC 知道该元素已准备好删除。