-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (109 loc) · 3.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
background: black;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
audio {
width: 100%;
position: fixed;
bottom: 0;
background: black;
}
</style>
</head>
<body>
<div id="container">
<canvas height="1024" width="1024" id="vis"></canvas>
</div>
<audio id="audio" src="az.mp3" preload controls autoplay></audio>
<script>
// See http://bit.ly/fxq7EY
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element){
window.setTimeout(callback, 1000 / 60);
};
})();
</script>
<script>
var audioElement = document.getElementById('audio');
var canvas = document.getElementById('vis');
var CANVAS_HEIGHT = canvas.height;
var CANVAS_WIDTH = canvas.width;
var ctx = canvas.getContext('2d');
var audioContext = new webkitAudioContext();
var analyser = audioContext.createAnalyser();
var freqData = new Uint8Array(analyser.frequencyBinCount); //1024
var FADE = true;
var CONTAIN = true;
var SPIN = 30;
var SIZE = 1;
var particles = [];
var oldSum = 0;
var sum = 0;
var t = 0;
var r, g, b;
var center = { x: CANVAS_WIDTH/2, y: CANVAS_HEIGHT/2 };
ctx.fillStyle = "rgba(255,255,255,.1)";
analyser.smoothingTimeConstant = 0.9;
window.onload = init;
audioElement.addEventListener('play', draw);
/* stream goes from audioElement to analyser to speakers */
function init() {
var source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.getByteFrequencyData(freqData);
for (var i = 0; i < freqData.length; i++) {
particles.push({ x: center.x, y: center.y, dx: 0, dy: 0 });
}
}
/* draw a single animation frame */
function draw() {
requestAnimFrame(draw, canvas);
analyser.getByteFrequencyData(freqData);
t++;
oldSum = sum;
sum = 0;
center.x += Math.cos(t/100);
center.y += Math.sin(t/100);
if (FADE) {
ctx.fillStyle = "rgba(0,0,0,.04)";
ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}
r = Math.abs(Math.round(255*Math.sin(t/50)));
g = Math.abs(Math.round(255*Math.cos(t/25)));
b = Math.abs(Math.round(255*Math.tan(t/60)));
for (var i = 0; i < freqData.length; i++) {
var particle = particles[i];
sum += freqData[i];
particle.x += particle.dx + Math.cos(t/100);
particle.y += particle.dy + Math.sin(t/100);
particle.dx = Math.sin(i/(freqData.length/Math.PI/2) + (freqData[i] - 128)/SPIN);
particle.dy = Math.cos(i/(freqData.length/Math.PI/2) + (freqData[i] - 128)/SPIN);
if (CONTAIN && (particle.x >= CANVAS_WIDTH || particle.x <= 0 || particle.y >= CANVAS_HEIGHT || particle.y <= 0)) {
particle.x = center.x;
particle.y = center.y;
}
if (FADE)
ctx.fillStyle = "rgba(" + r + "," + g + "," + b + ",.3)";
else
ctx.fillStyle = "rgba(" + r + "," + g + "," + b + ",.1)";
ctx.fillRect(particle.x, particle.y, SIZE, SIZE);
}
}
</script>
</body>
</html>