私はいくつかの音楽視覚化の実験を行っており、選択した視覚化に応じて、canvas または svg の dance.js からデータを描画します。キャンバスに js をクリアし、両方の svg に raphaeljs を使用し、最後の 1 つに three.js という 4 つのオプションがあります。
サウンド要素を保持し、dancer.js のリロードを防ぐために、次の方法でさまざまなスクリプトをロードします。
$('body > a').click(function(){
$('canvas').remove();
$('svg').empty();
$('svg').remove();
var id = $(this).attr('id');
audioElement = $('#audio')[0];
$.ajax({
type: "GET",
url: "js/"+id+"-ajax.js",
dataType: "script"
});
});
キャンバスと svg を削除する必要があります。異なるビジュアライゼーションが ajax によってキャッチされている場合は、
init = function() {
...
}
init();
onKick
これらは、ロードされたスクリプトに対してそれぞれ init で変更されるなど、同じ関数を共有します。(onKick は、dancer.js が再生中の曲の「キック」で起動するためのものです)。
それらを切り替え始める瞬間まで、それは非常にうまく機能します。キャンバスとキャンバスを切り替えてもほとんど違いはありませんが、キャンバスから svg に変更すると、キャンバスに戻るとフレームレートが大幅に低下します。
メモリに保持されている svg やその他の提案が原因でしょうか?