javascript - paper.js + soundmanager 声音表示

Question

我想在声音管理器waveformData提供的 Canvas 数据上实时绘制，并使其看起来像一条平滑移动的均衡器线，如 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.