-
Notifications
You must be signed in to change notification settings - Fork 3
/
example.html
158 lines (122 loc) · 4.32 KB
/
example.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>VisualizerMicro - Example usage page</title>
<style>
#visualizer {
height: 300px;
position: relative;
}
.visualizer-node {
position: absolute;
bottom: 0;
width: 1px;
background: blue;
}
</style>
</head>
<body>
<h1>VisualizerMicro Example</h1>
<p>This page is a basic implementation of the visualizer-micro library.</p>
<p><a target="_blank" href="https://github.com/likethemammal/visualizer-micro/blob/master/example.html">View the source</a> to see how things are implemented.</p>
<hr />
<div id="supported"></div>
<p>
<div>Because of <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">big changes to how browsers handle autoplay</a>,</div>
<div>the user must trigger an event directly to allow visualization to work.</div>
<p>
<em>Clicking the "Load Visualizer" button is required</em>
</p>
<p>
<button id="load" disabled>Load Visualizer</button>
</p>
</p>
<p>
<audio id="audio" src="sample.mp3" controls></audio>
</p>
<br/>
<br/>
<br/>
<p>
<p>
<em>Visualizer Type Switch:</em>
</p>
<button id="switch" disabled>Waveform</button>
</p>
<p>
<a href="https://soundcloud.com/musisikamar-1/crimsound-bang">CRIMSOUND - BANG !!</a>
</p>
<div id="visualizer"></div>
<script src="dist/visualizer-micro.js"></script>
<script>
var vm = new VisualizerMicro();
var supportedEl = document.getElementById('supported');
var audioEl = document.getElementById('audio');
var switchEl = document.getElementById('switch');
var loadEl = document.getElementById('load');
var visualizerEl = document.getElementById('visualizer');
var spectrumText = 'Spectrum';
var waveformText = 'Waveform';
var defaultVisualizerType = 'spectrum';
var currentVisualizerType = defaultVisualizerType;
var visualizerHeight = visualizerEl.clientHeight;
var vizEls = [];
audioEl.volume = 0.4;
// setup visualizer type switch button
switchEl.onclick = function() {
if (currentVisualizerType === defaultVisualizerType) {
currentVisualizerType = 'waveform';
switchEl.innerHTML = spectrumText;
} else {
currentVisualizerType = defaultVisualizerType;
switchEl.innerHTML = waveformText;
}
};
// toggle UI to show browser support
if (vm.isSupported()) {
supportedEl.innerHTML = 'This browser supports visualizing audio data';
supportedEl.style.color = 'green';
switchEl.disabled = false;
loadEl.disabled = false
// an event like this click is required for the browser to allow visualization
loadEl.onclick = load;
} else {
supportedEl.innerHTML = 'This browser doesn\'t support visualizing audio data';
supportedEl.style.color = 'red';
}
function load(){
vm.load(audioEl, function() {
// setup audio data retrieval and animation loop
setInterval(function () {
if (audioEl.paused) {
return
}
var div;
var divHeight;
var isSpectrum = currentVisualizerType === defaultVisualizerType;
// get audio data for this moment
var audioData = isSpectrum ? vm.getSpectrum() : vm.getWaveform();
var audioDataLength = audioData.length;
// create visualizer nodes
if (!vizEls.length) {
for (var i = 0; i < audioDataLength; i++) {
div = document.createElement('div');
div.className = 'visualizer-node';
div.style.left = i + 'px';
vizEls.push(div);
visualizerEl.appendChild(div);
}
}
// parse audio data and change div heights
for (var j = 0; j < audioDataLength; j++) {
div = vizEls[j];
divHeight = Math.round(audioData[j] * visualizerHeight)
div.style.height = divHeight + 'px';
}
}, 50);
});
}
</script>
</body>
</html>