-
Notifications
You must be signed in to change notification settings - Fork 11
/
recorder.html
132 lines (108 loc) · 3.36 KB
/
recorder.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Record/Encode Audio</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<style type='text/css'>
body{ padding: 15px; margin: 15px;}
</style>
</head>
<body>
<h1>Record/Encode Audio on Browser using the WebAudio API and "ported" libraries.</h1>
<p>
August 17, 2014: Version 0.0.1
</p>
<h2>Platforms and Browsers</h2>
<ul>
<li>Chrome 32+</li>
</ul>
<h2>Codecs</h2>
<ul>
<li> MP3: 22.050Hz && 128Kbps using the ported liblame</li>
<li> Ogg-Vorbis: @TODO</li>
<li> Spx: @TODO</li>
<li> Flac: @TODO</li>
</ul>
<button class="btn btn-default" onclick="startRecording(this);">Record</button>
<button class="btn btn-default" onclick="stopRecording(this);" disabled>Stop</button>
<h2>
Recordings
</h2>
<ul id="recordingslist">
</ul>
<h2>Log</h2>
<pre id="log">
</pre>
<script>
function logHTML(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
var audioContext;
var audioRecorder;
var _realAudioInput;
function handlerStartUserMedia(stream) {
console.log('handlerStartUserMedia');
console.log('sampleRate:'+ audioContext.sampleRate);
// MEDIA STREAM SOURCE -> ZERO GAIN >
_realAudioInput = audioContext.createMediaStreamSource(stream);
audioRecorder = new Recorder(_realAudioInput);
}
function handlerErrorUserMedia(e) {
logHTML('No live audio input: ' + e);
}
function startRecording(button) {
if(!audioRecorder){
return;
}
audioRecorder && audioRecorder.record();
//GUI
button.disabled = true;
button.nextElementSibling.disabled = false;
logHTML('Recording...');
}
function stopRecording(button) {
if(!audioRecorder){
return;
}
audioRecorder.stop();
//GUI
button.disabled = true;
button.previousElementSibling.disabled = false;
logHTML('Stopped recording.');
}
window.onload = function init() {
// webkit shim.
window.AudioContext = (
window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext
);
navigator.getUserMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
);
window.URL = window.URL || window.webkitURL;
audioContext = new AudioContext;
logHTML('Audio context set up.');
logHTML('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
if (typeof navigator.mediaDevices.getUserMedia === 'undefined') {
navigator.getUserMedia({
vide:false,
audio: true
}, handlerStartUserMedia, handlerErrorUserMedia);
} else {
navigator.mediaDevices.getUserMedia({
audio: true
}).then(handlerStartUserMedia).catch(handlerErrorUserMedia);
}
};
</script>
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="js/recorder.js"></script>
</body>
</html>