-
Notifications
You must be signed in to change notification settings - Fork 8
/
spectrum.html
74 lines (67 loc) · 1.84 KB
/
spectrum.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/JustAddMusic.js"></script>
<style type="text/css">
body {
margin:0;
background: #212;
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.jam-drop { border: solid 20px #CF3; } /* draw an outline when a file is dragged over the drop target */
.jam-ui { font-size: 18px; } /* make the UI text a bit bigger than usual */
#container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-content: stretch;
align-items: flex-end;
pointer-events: none;
}
.bar {
margin: 0 1px;
flex: 1;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// how many bars do we want to draw? Max of 128.
var bars = 64, hue=320;
// add the bar elements to the container div:
for (var i=0; i<bars; i++) {
var bar = document.createElement("div");
bar.className = "bar";
container.appendChild(bar);
}
// create a new JAM instance:
var jam = new JustAddMusic({
// default audio to load:
src: "assets/bensound-dubstep.mp3",
// label text to include in the UI (bottom left)
label: "<b>JustAddMusic.js </b>",
// set the number of spectrum values we'd like to get back:
spectrumBins: bars,
// the ontick callback, called 60 time per second by default
// with the latest audio data object as the only parameter
ontick: function(o) {
// change the base hue value on a bass hit:
if (o.low.hit) { hue = (hue+100)%360; }
for (var i=0; i<bars; i++) {
// update bars based on the spectrum values:
var style = container.childNodes[i].style, val = o.spectrum[i];
style.height = val*100+"%";
style.background = "hsl("+ (hue-val*180) +","+ (val*50+50) +"%,"+ (val*40+20) +"%)";
}
}
});
</script>
</body>
</html>