-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
71 lines (63 loc) · 1.91 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
<!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: #333;
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 */
.bar {
height:100%;
width: 32%;
background: #222;
position: absolute;
bottom: 0;
}
#bar2 { left: 33%; width:34%; }
#bar3 { left: 68%; }
</style>
</head>
<body>
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<script>
var hue = 60;
// create a new JAM instance:
var jam = new JustAddMusic({
// default audio to load:
src: "assets/bensound-dubstep.mp3",
// this fires when the track ends:
onended: function() { console.log("ended"); },
// label text to include in the UI (bottom left)
label: "<b>JustAddMusic.js </b>",
// the ontick callback, called 60 time per second by default
// with the latest audio data object as the only parameter
ontick: function(o) {
// update the bar heights based on instantaneous values:
bar1.style.height = o.low.val * 100+"%";
bar2.style.height = o.mid.val * 100+"%";
bar3.style.height = o.high.val * 100+"%";
// change the hue on each hit:
if (o.low.hit) { hue = (hue+100)%360; }
// vary the saturation and lightness based on the avg volume:
let n = o.all.avg*100;
// update the body background color:
document.body.style.background = "hsl("+ hue +","+ n*0.6 +"%,"+ (n*0.4+10) +"%)";
// grab the label and update its color:
var label = document.body.querySelector(".jam-ui b");
label.style.color = "hsl("+ hue +",60%,50%)";
}
});
</script>
</body>
</html>