4

HTML 5 タグを含むサウンド ファイルをロードし、マウス クリックでそのサウンド ファイルの新しいインスタンスの再生を開始する jQuery を使用して JavaScript を少し作成し<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()ため、そのまま保持します。

jQuery を使用remove()すると、そのメモリが解放されます。

アップデート

何回クローニングしていますか？これはブラウザーであり、おそらく何百ものaudio要素を同時に実行するように最適化されていないことを認識していますか?

私はちょうどそれを複製しました~300Firefox 3.6 で ~600 回、正常に動作しました。ただし、Chrome 8で数百回実行した後、クラッシュしました。

ここでは、を介して複製してsetInterval()います。ブラウザがクラッシュすると思われる場合は、クリックしないでください。

アップデート

@alex: いいえ、同時にではありません。私の問題は、サウンドがリスポーン間隔よりも短い場合でも Chromium がメモリ リークすることです (注 2 のように)。

これでもブラウザがクラッシュしますか?

于 2010-12-05T01:20:19.877 に答える