-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathvis.html
111 lines (90 loc) · 2.72 KB
/
vis.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
<!DOCTYPE html>
<html>
<head>
<title>Vis</title>
<script type="text/javascript" src="bands.js"></script>
<script type="text/javascript" src="visualizers.js"></script>
</head>
<body>
<canvas id="vis-canvas" width="360" height="360"></canvas><br />
<audio src="waves.mp3"></audio>
<button id="previous-button"><</button>
<button id="next-button">></button>
<span id="visualizer-name"> </span>
<br />
<div id="visualizer-description"> </div>
<script>
var audio = document.getElementsByTagName('audio')[0];
var visualizers = window.visualizers;
var visualizerIndex = 0;
function updateVisualizerLabel() {
document.getElementById('visualizer-name').innerHTML = visualizers[visualizerIndex].name;
document.getElementById('visualizer-description').innerHTML = visualizers[visualizerIndex].description;
}
updateVisualizerLabel();
document.getElementById('previous-button').addEventListener('click', function(e) {
visualizerIndex--;
if (visualizerIndex < 0) {
visualizerIndex += visualizers.length;
}
updateVisualizerLabel();
});
document.getElementById('next-button').addEventListener('click', function(e) {
visualizerIndex++;
visualizerIndex %= visualizers.length;
updateVisualizerLabel();
});
var startVisualizer = function(e) {
audio.play();
var canvas = document.getElementById('vis-canvas');
var allFrames = window.allFrames;
var frameIndex = 0;
var lastFrame = undefined;
function nextFrame() {
var frame = allFrames[frameIndex];
if (frame == undefined) {
// wrap around tbh
frameIndex = 0;
audio.currentTime = 0;
return;
}
var velocity = frame.map(function(value, index) {
if (lastFrame == undefined || lastFrame[index] == undefined) {
return value;
} else {
return value - lastFrame[index];
}
});
lastFrame = frame;
var width = canvas.width;
var height = canvas.height;
// display frame on canvas
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, width, height);
function plot(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x, height - y, 1, 1);
};
function rgbaNorm(r, g, b, a) {
return "rgba(" + parseInt(r * 255) + "," + parseInt(g * 255) + "," + parseInt(b * 255) + "," + parseInt(a * 255) + ")";
};
visualizers[visualizerIndex].visualizerFunction(plot, frame, width, height, velocity, frameIndex);
frameIndex += 1;
}
if (window.nextFrameInterval) {
clearInterval(window.nextFrameInterval);
}
window.nextFrameInterval = setInterval(nextFrame, 1000 / 42.0);
};
audio.addEventListener('error', startVisualizer);
audio.addEventListener('canplaythrough', startVisualizer);
document.addEventListener("visibilitychange", function() {
if (document.hidden) {
audio.volume = 0;
} else {
audio.volume = 1;
}
}, false);
</script>
</body>
</html>