(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