paper.js+soundmanager声音表示
paper.js + soundmanager sound representation
我想在画布上绘制声音管理器waveformData
提供的实时数据,并使其看起来像一条平滑移动的均衡器线http://paperjs.org/tutorials/animation/creating-animations/#moving-多个项目。问题是,所有的东西都被重新绘制了,看起来不太顺利。有什么改进的想法吗?
`
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();
})`
您可以尝试降低帧速率:
setTimeout(function(){
webkitRequestAnimationFrame(data)
}, 1000 / 20); // 20fps.
相关文章:
- 有可能过滤来自嵌入式YouTube的声音吗
- 如何访问声音管理器2创建的声音对象
- React中的数据集表示
- 任何将(SSH)终端嵌入到一些HTML5表示系统中的想法(例如,show.js)
- 文本表示法VS.构造函数,用于在JavaScript中创建对象
- 如何将Date字段设置为等于另一个Date+Int值,该值表示月份值
- regex表示逗号,后跟空格或仅逗号
- 我将如何将其更改为循环和数组表示法
- 如何减少在移动网络应用程序上播放声音的延迟
- 如何使用Undercore和Backbone在HTML中表示模型属性
- 使用JS和JQuery播放和停止声音
- 将JSON对象的表示形式更改为显式键/值格式
- 如何在JS中获得CryptoJS.HmacSHA256的摘要表示
- 在javascript中使用方括号表示法的嵌套对象
- p5.js声音库:如何添加/删除p5.第5页中的短语().零件()
- 如何在JavaScript中将数字表示为十六进制
- 创建一个倒计时计时器脚本,该脚本计算声音文件的持续时间,而不是特定的日期
- 如何从二进制int中获取百分比,每个位表示x%
- HTML5音频如何防止浏览器麦克风拾取所有声音
- paper.js+soundmanager声音表示