(function renderFrame() {
window.requestAnimationFrame(renderFrame);
if(isPause) {
b1.resetStrokeStyle('#ccc');
b2.resetFillStyle();
b3.resetFillStyle();
b4.resetFillStyle('rgb(135, 31, 120)');
return;
};
for(var i = 0; i < data.length; i++) {
sum += data[i];
}
if(oldSum === sum && sum != 0) {
b1.resetStrokeStyle('#ccc');
b2.resetFillStyle();
b3.resetFillStyle();
b4.resetFillStyle('rgb(135, 31, 120)');
} else {
b1.render();
console.log(Math.abs((sum - oldSum) / 12800 - 10) * 100);
rollAngle += Math.abs((sum - oldSum) / 12800 - 10) * 100;
document.querySelector('#canvas1').style.transform = 'rotate(' + rollAngle + 'deg)';
document.querySelector('#canvas2').style.transform = 'rotate(' + rollAngle + 'deg)';
document.querySelector('#canvas3').style.transform = 'rotate(' + rollAngle + 'deg)';
document.querySelector('#canvas4').style.transform = 'rotate(' + rollAngle + 'deg)';
oldSum = sum;
data = [];
}
}());
audio.addEventListener('play', function() {
if(hasBeenEnded) return location.reload();
var n = 20;
while(n) {
b2.render(true);
b3.render(true);
b4.render(true);
n--;
}
isPause = false;
});
processor.onaudioprocess = function() {
data = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(data);
};
// 播放音频元素,不然没有声音
this.element.play();
}
};
// 初始化音频,包括音频控制
audio = audioService.init(Sound);
// 可视化
// 初始化色环
var b1 = new BorderAnimation();
var b2 = new BorderAnimation();
var b3 = new BorderAnimation();
var b4 = new BorderAnimation();
b1.init({
width: 300 || window.innerWidth,
height: 300 || window.innerHeight
},
document.querySelector('#canvas1'),
3, '', true
);
b2.init({
width: 300 || window.innerWidth,
height: 300 || window.innerHeight