paper.js + soundmanager 사운드 표현

Question

soundmanagers가 제공하는 캔버스 데이터를 라이브로 그려야합니다. waveformDatahttp://paperjs.org/tutorials/animation/creating-animations/#moving-multiple-items처럼 부드럽게 움직이는 이퀄라이저 라인처럼 보이게하십시오. 문제는 모든 것이 다시 그려지고 매우 부드럽게 보이지 않는다는 것입니다. 어떤 아이디어를 개선하는 방법?

`

paper.install(window); 
    var soundOutput = []; 

    $(document).ready(function(){ 
    soundManager.url = 'swf/'; 
    soundManager.flashVersion = 9; 
    soundManager.useHTML5Audio = true; 

    soundManager.onready(function() { 
var song = soundManager.createSound({ 
     id: 'song', 
     url: '4353.mp3', 
     useWaveformData: true, 
}); 
song.play(); 
var i = 0; 
function data() { 

    if (!(i % 4)) { 
    for (n=0; n<20; n++) { 
     soundOutput[n] = song.waveformData.left[n]; 
    } 
    } 
    i++; 
    window.webkitRequestAnimationFrame(data); 

} 
data(); 
    }); 

canvas = document.getElementById("scene"); 
canvas.width = 632; 
canvas.height = 660; 
paper.setup('scene'); 
view.size = [500, 500]; 
var amount = 20; 
var height = 60; 

var path = new Path(); 
path.style = { 
    strokeColor: new GrayColor(0.2), 
    strokeWidth: 30, 
    strokeCap: 'square' 
}; 

for (var i = 0; i <= amount; i++) { 
    path.add(new Point(i/amount * 500, 50)); 
} 


    path.selected = true; 
view.onFrame = function(event) { 
    for (var i = 0; i <= amount; i++) { 
     var segment = path.segments[i]; 

     segment.point.y = soundOutput[i] * 1000; 
    } 


} 
    view.draw(); 

})` 

Answer 1

당신은 프레임 속도를 낮추는 시도 할 수 :

setTimeout(function(){ 
    webkitRequestAnimationFrame(data) 
}, 1000/20); // 20fps.