paper.js +聲音管理聲音表示

Question

我想在聲音管理器waveformData的畫布數據上生效，並使它看起來像平滑移動的均衡器線，如http://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.