-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (135 loc) · 4.29 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bumpin'</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
html {
background-color: rgb(0,0,56);
}
body {
margin: 0;
}
.bottom, .top {
display:block;
}
button {
border: 1px solid white;
border-radius: 3px;
background-color: rgba(255,255,255,0.1);
color: white;
font-family: 'Lato';
font-size: 16px;
padding: 15px;
margin-right: 15px;
}
button:hover {
background-color: rgba(255,255,255,0.3);
cursor: pointer;
}
h1 {
color: white;
font-family: 'Lato';
text-align: center;
}
.header-wrapper {
text-align: center;
}
</style>
</head>
<body>
<audio id="audioElement">
<source src="/assets/bloodflood.mp3" type="audio/mpeg">
<p>Your browser does not support audio... :/ Get Google Chrome</p>
</audio>
<div class="header-wrapper">
<h1>bumpin</h1>
<button onclick="document.getElementById('audioElement').play()">Play the Audio</button>
<button onclick="document.getElementById('audioElement').pause()">Pause the Audio</button>
<button onclick="document.getElementById('audioElement').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('audioElement').volume-=0.1">Decrease Volume</button>
</div>
<script src="https://d3js.org/d3.v3.min.js" crossorigin="anonymous"></script>
<script>
// Cross browser context
var AudioContext = window.AudioContext || window.webkitAudioContext;
// Construct an AudioContext
var audioCtx = new AudioContext();
// Get source element from html
var audioElement = document.getElementById('audioElement');
audioElement.crossOrigin = "anonymous";
// Turn element into a MediaElementSourceNode
var audioSrc = audioCtx.createMediaElementSource(audioElement);
// Create an analyser
var analyser = audioCtx.createAnalyser();
// Connect source to analyser and destination
audioSrc.connect(analyser);
audioSrc.connect(audioCtx.destination);
// Array to store audio data
var frequencyData = new Uint8Array(200);
// Set size variables
var boundingRect = document.getElementsByTagName("BODY")[0].getBoundingClientRect();
var svgHeight = '300';
var svgWidth = boundingRect.width;
var barPadding = '0';
// Create SVG
function createSvg(parent, height, width) {
return d3.select(parent).append('svg').attr('height', height).attr('width', width);
}
var svgTop = createSvg('body', svgHeight, svgWidth).attr('class', 'top');
var svgBottom = createSvg('body', svgHeight, svgWidth).attr('class', 'bottom');
// Create top rectangles
svgTop.selectAll('rect')
.data(frequencyData)
.enter()
.append('rect')
.attr('class', 'top')
.attr('x', function (d, i) {
return i * (svgWidth / frequencyData.length);
})
.attr('width', svgWidth / frequencyData.length - barPadding)
.attr('y', 0)
.attr('transform', 'translate(0,' + svgHeight + ') scale(1,-1)' );
// Create bottom rectangles
svgBottom.selectAll('rect')
.data(frequencyData)
.enter()
.append('rect')
.attr('class', 'bottom')
.attr('x', function (d, i) {
return i * (svgWidth / frequencyData.length);
})
.attr('width', svgWidth / frequencyData.length - barPadding)
.attr('y', 0);
// Continuously loop and update chart with frequency data.
function renderChart() {
requestAnimationFrame(renderChart);
// Copy frequency data to frequencyData array.
analyser.getByteFrequencyData(frequencyData);
var rand = Math.floor(Math.random() * 255);
rand = 0;
// Update bottom rectangles
svgBottom.selectAll('.bottom')
.data(frequencyData)
.attr('height', function(d) {
return d;
})
.attr('fill', function(d) {
return 'rgb(0,' + rand + ', ' + d + ')';
});
// Update top rectangles
svgTop.selectAll('.top')
.data(frequencyData)
.attr('height', function(d) {
return d;
})
.attr('fill', function(d) {
return 'rgb(0,' + rand + ', ' + d + ')';
});
}
// Run the loop
renderChart();
</script>
</body>
</html>