如何通过清理 <audio> 元素来防止内存泄漏？

Question

我用 jQuery 编写了一些 JavaScript，它加载了一个带有 HTML 5 <audio> 标签的声音文件，并在鼠标单击时开始播放该声音文件的一个新实例（以便它可以并行播放多次/覆盖）。

HTML：

<audio id="audiotemplate" src="audio/myfile.ogg"></audio>

JavaScript：

mybutton.click(function() {
    $('#audiotemplate').clone()[0].play();
});

这按预期工作，但会造成内存泄漏，导致 FF 耗尽系统 RAM，并且如果您单击该按钮太多次，Chromium 会显示其“啊，快拍”页面。

编辑：为了快速测试，最好使用$(document).keypress 而不是mybutton.click，并按住按钮。

声音文件播放完毕后如何清理<audio>元素？

注意：我不会将克隆的元素插入到页面中。

注意 2：如果您单击也会发生泄漏，等到声音结束，再次单击...

（我对解决方案感到满意，但也感谢解释为什么会发生泄漏。）

Answer 1

这样效果更好吗？

mybutton.click(function() {

    var cloned = $('#audiotemplate').clone()[0];

    cloned.play();

    cloned.onended = function() {
        $(cloned).remove();
    }

});

Here on JSFiddle.

我只能猜测泄漏，即为您克隆的每个实例保留了一些内存，并且当它完成时它不会自动清理，因为您可能需要再次访问它。例如，您的浏览器不知道您只想播放一次，所以它会保留它，因为您可能想再次调用play()。

使用 jQuery 的 remove() 应该可以释放内存。

更新

你克隆了多少次？您知道这是一个浏览器，并且可能没有针对同时运行数百个 audio 元素进行优化？

我刚刚在 Firefox 3.6 中克隆了它 ~300 ~600 次，它运行良好。不过，在 Chrome 8 上运行了几百次后，它确实崩溃了。

Here it is cloning via setInterval()。 如果您认为它会导致浏览器崩溃，请不要点击。

更新

@alex：不，不是同时。我的问题是，即使声音比重生间隔短（如注 2 所示），Chromium 也会泄漏内存 - 所以不是同时播放，而是一个接着一个播放。

Does this still crash your browsers?