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，如果您多次单击该按钮，则会显示其“Ah，Snap”页面。

编辑：要快速测试，请更好地使用$(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：不，不是同时。我的问题是，即使声音短于重生间隔，Chromium也会泄漏内存（如注2所示） - 因此不能同时播放，而是相互播放。

Does this still crash your browsers?

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

HTML：

的JavaScript：

1 个答案:

更新

更新