forked from AppGeo/web-audio-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
microphone.html
96 lines (85 loc) · 2.81 KB
/
microphone.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Microphone</title>
<link href="css/audio.css" rel="stylesheet" />
<style>
.label {
width: 80px;
}
.slider {
width: 200px;
}
</style>
</head>
<body>
<div>
<span class="title">Microphone</span>
</div>
<div>
<div>
<span class="label">Gain</span>
<input type="range" id="gain-slider" class="slider" min="-20" max="20" step="1" value="0" />
<span id="gain-display" class="label">0 db</span>
</div>
<select id="vis-select">
<option value="Frequency">frequency</option>
<option value="Spectrogram">spectrogram</option>
</select><br/>
<canvas id="visualizer" width="1024" height="300"></canvas>
</div>
<div class="nav">
<a href="hearing.html">> Hearing Test</a><br/>
<a href="index.html">> Index</a>
</div>
</body>
<script type="text/javascript" src="js/audio-helper.js"></script>
<script type="text/javascript" src="js/frequency-visualizer.js"></script>
<script type="text/javascript" src="js/spectrogram-visualizer.js"></script>
<script type="text/javascript">
(function () {
var context = new AudioContext();
var visCanvas = document.getElementById('visualizer')
var visualizer = new App.FrequencyVisualizer(context, visCanvas);
var gain = 0;
var audioSource
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia (
{
audio: true,
video: false
},
function (stream) {
audioSource = context.createMediaStreamSource(stream);
visualizer.acceptConnection(audioSource);
},
function (err) {
console.log('Error initializing user media stream: ' + err);
}
);
}
var gainDisplay = document.getElementById('gain-display');
var gainSlider = document.getElementById('gain-slider');
gainSlider.addEventListener('input', function () {
gain = parseFloat(gainSlider.value)
gainDisplay.textContent = gain + ' db';
visualizer.gain = gain;
});
var visSelect = document.getElementById('vis-select');
visSelect.addEventListener('change', changeVisualizer);
function changeVisualizer() {
visualizer.releaseConnection(audioSource);
visualizer.stop();
visualizer = new App[visSelect.value + "Visualizer"](context, visCanvas);
visualizer.gain = gain;
visualizer.acceptConnection(audioSource);
}
})();
</script>
</html>