-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaudio.html
135 lines (119 loc) · 4.3 KB
/
audio.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
<!-- Thanks to http://codepen.io/zapplebee/full/gbNbZE/ for fork code -->
<head>
<style>
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color:#111;
font-size: 0;
}
svg{
display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position:absolute;
}
h1{
display: inline-block;
font-family: sans-serif;
position:relative;
color:white;
font-size: 36px;
top: 40%;
opacity: 1;
}
/*h1 a{
color: #48b1f4;
text-decoration:none;
}*/
path {
stroke-linecap: square;
stroke: white;
fill: white;
stroke-width: 0.5px;
}
</style>
</head>
<body>
<svg preserveAspectRatio="none" id="visualizer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask"></mask>
<mask id="bigMask"></mask>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="00%" style="stop-color:#faff0a;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#050d61;stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="15%" height="100%" fill="url(#gradient)" mask="url(#mask)"></rect>
<rect x="16" y="0" width="127" height="100%" fill="url(#gradient)" mask="url(#mask)"></rect>
</svg>
<h1 style="text-align:right; width:50%"></h1><h1>Enable microphone</h1>
<script type="text/javascript">
window.onload = function () {
"use strict";
var paths = document.getElementsByTagName('path');
var visualizer = document.getElementById('visualizer');
var mask = visualizer.getElementById('mask');
var h = document.getElementsByTagName('h1')[0];
var h2 = document.getElementsByTagName('h1')[1];
var path;
var bigPath;
var report = 0;
var soundAllowed = function (stream) {
window.persistAudioStream = stream;
var audioContent = new AudioContext();
var audioStream = audioContent.createMediaStreamSource( stream );
var analyser = audioContent.createAnalyser();
audioStream.connect(analyser);
analyser.fftSize = 1024;
var frequencyArray = new Uint8Array(analyser.frequencyBinCount);
var maxDb = analyser.maxDecibels;
visualizer.setAttribute('viewBox', '0 0 143 255');
//Through the frequencyArray has a length longer than 255, there seems to be no
//significant data after this point. Not worth visualizing.
for (var i = 0 ; i < 127; i++) {
path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('stroke-dasharray', '9,2');
mask.appendChild(path);
}
bigPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
mask.appendChild(bigPath);
h.innerHTML = 0;
h2.innerHTML = "dB"
var doDraw = function () {
var top10;
var average;
requestAnimationFrame(doDraw);
analyser.getByteFrequencyData(frequencyArray);
for (var i = 0 ; i < 127; i++) {
paths[i].setAttribute('d', 'M '+ (i + 16) +'.5 256 l 0 -' + frequencyArray[i]);
}
frequencyArray.sort(function(a, b) {
return a-b;
});
top10 = frequencyArray.slice(-128);
average = top10.reduce(function(a, b) { return a + b; }) / top10.length;
h.innerHTML = 40+Math.floor(average/10);
bigPath.setAttribute('d', 'M 0.5 256 l 0 -' + average + ' l 12 0'
+ ' l 0 ' + average + ' l -12 0 Z');
document.body.style.backgroundColor="#"+(Math.floor(average/4+17)).toString(16)+"1111";
}
doDraw();
}
var soundNotAllowed = function (error) {
h1.setAttribute("text-align", "center");
console.log(error);
}
window.navigator = window.navigator || {};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
null;
navigator.getUserMedia({audio:true}, soundAllowed, soundNotAllowed);
};
</script>
</body>