4

我用 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：如果您单击，也会发生泄漏，等到声音结束，再次单击...

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

4

1 回答 1

2

这会更好吗？

mybutton.click(function() {

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

    cloned.play();

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

});

在 JSFiddle 上。

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

使用 jQueryremove()应该可以释放内存。

更新

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

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

这里是通过 克隆setInterval()。如果您认为它会使您的浏览器崩溃，请不要单击它。

更新

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

这仍然会使您的浏览器崩溃吗？

于 2010-12-05T01:20:19.877 回答