-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathdemo.html
More file actions
198 lines (162 loc) · 7.8 KB
/
demo.html
File metadata and controls
198 lines (162 loc) · 7.8 KB
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!--
-- Author: Robert Derveloy
-- Written: 2012-12-01
--
-- Copyright (c) 2012-2015 - Robert Derveloy
--
-- This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
-- To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.
--
-->
<html>
<head>
<title>JavaScript Sound Recorder Demo</title>
</head>
<body>
<div id="div_RecordingNotSupported" name="div_RecordingNotSupported" style="display:block;">
Sorry, it appears that your browser does not support getUserMedia audio recording. Please see the <a href="http://caniuse.com/#feat=stream">Can I Use website</a> for a list of capable browsers.
</div>
<form id="form_controls" name="form_controls">
<button id="button_startRecording" onclick="handleStartRecordingButtonClick();" type="button" style="display:none;">Start Recording</button>
<button id="button_stopRecording" onclick="handleStopRecordingButtonClick();" type="button" style="display:none;">Stop Recording</button>
</form>
<br/>
<br/>
<footer>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a>
<br />
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">
Javascript Sound Recorder
</span>
by
<a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/rderveloy/JavaScript-Sound-Recorder/" property="cc:attributionName" rel="cc:attributionURL">
Robert Derveloy
</a>
is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
</a>.
</footer>
<script src='SoundRecorder.js'></script>
<script>
// variables
var wavFileBlob = null;
var recorderObj = null;
var scriptProcessor = null;
var detectGetUserMedia = new BrowserGetUserMediaDetection();
//First, check to see if get user media is supported:
console.log("Get user media supported: " + detectGetUserMedia.getUserMediaSupported());
if(detectGetUserMedia.getUserMediaSupported())
{
console.log("Get user media is supported!");
console.log("Supported get user media method: " + detectGetUserMedia.getUserMediaMethod());
console.log("Assigning get user media method.");
navigator.getUserMedia = detectGetUserMedia.getUserMediaMethod();
console.log("Requesting microphone access from browser.");
navigator.getUserMedia({audio:true}, success, failure);
document.getElementById("div_RecordingNotSupported").style.display="none"; // hide recording not supported message
document.getElementById("button_startRecording").style.display="block"; // show start recording button
}
else
{
console.log("ERROR: getUserMedia not supported by browser.");
alert('Your browser does not appear to support audio recording.');
}
//Get user media failure callback function:
function failure(e)
{
console.log("getUserMedia->failure(): ERROR: Microphone access request failed!");
var errorMessageToDisplay;
var PERMISSION_DENIED_ERROR = "PermissionDeniedError";
var DEVICES_NOT_FOUND_ERROR = "DevicesNotFoundError";
console.log(e);
console.log(e.name);
switch(e.name)
{
case PERMISSION_DENIED_ERROR:
errorMessageToDisplay = 'ERROR: You must grant permission before audio recording can continue.';
break;
case DEVICES_NOT_FOUND_ERROR:
errorMessageToDisplay = 'ERROR: No microphones detected. Please connect and configure your microphone.';
break;
default:
errorMessageToDisplay = 'ERROR: The following unexpected error occurred while attempting to connect to your microphone: '+e.name;
break;
}
console.log("getUserMedia->failure(): "+errorMessageToDisplay);
alert(errorMessageToDisplay);
}
//Get user media success callback function:
function success(e)
{
console.log("getUserMedia->success(): Microphone access request was successful!");
var BUFFER_SIZE = 2048;
var RECORDING_MODE = PredefinedRecordingModes.MONO_44_KHZ;
var SAMPLE_RATE = RECORDING_MODE.getSampleRate();
var OUTPUT_CHANNEL_COUNT = RECORDING_MODE.getChannelCount();
console.log("getUserMedia->success(): Detecting window audio context.");
var detectWindowAudioContext = new BrowserWindowAudioContextDetection();
if(detectWindowAudioContext.windowAudioContextSupported())
{
console.log("getUserMedia->success(): Window audio context supported.");
var windowAudioContext = detectWindowAudioContext.getWindowAudioContextMethod();
console.log("getUserMedia->success(): Window audio context method: " + windowAudioContext);
console.log('getUserMedia->success(): Creating recorder object.');
recorderObj = new SoundRecorder(windowAudioContext, BUFFER_SIZE, SAMPLE_RATE, OUTPUT_CHANNEL_COUNT);
console.log('getUserMedia->success(): Initializing recorder object.');
recorderObj.init(e);
console.log('getUserMedia->success(): Assigning onaudioprocess event function.');
recorderObj.recorder.onaudioprocess = function(e)
{
//Do nothing if not recording:
if (!recorderObj.isRecording()) return;
// Copy the data from the input buffers;
var left = e.inputBuffer.getChannelData (0);
var right = e.inputBuffer.getChannelData (1);
recorderObj.cloneChannelData(left, right);
console.log('SoundRecorder.recorder.onaudioprocess: Saving audio data...');
};
console.log('getUserMedia->success(): Recorder object successfully created and initialized.');
console.log('getUserMedia->success(): Recorder object ready status: ' + recorderObj.isReady());
document.getElementById("button_startRecording").disabled = false;
document.getElementById("button_stopRecording").disabled = true;
}
else
{
var messageString = "Unable to detect window audio context, cannot continue.";
console.log("getUserMedia->success(): "+ messageString);
alert(messageString);
return;
}
}
function handleStartRecordingButtonClick()
{
//Update UI:
document.getElementById("button_startRecording").disabled = true;
document.getElementById("button_startRecording").style.display = "none";
document.getElementById("button_stopRecording").style.display = "block";
document.getElementById("button_stopRecording").disabled = false;
//Start the recording:
console.log("Starting new recording...");
recorderObj.startRecordingNewWavFile();
}
function handleStopRecordingButtonClick()
{
//Disable stop button to prevent clicking too many times:
document.getElementById("button_stopRecording").disabled = true;
document.getElementById("button_stopRecording").style.display = "none";
//Stop the recording:
console.log("Stopping recording.");
recorderObj.stopRecording();
//Save the recording by building the wav file blob and send it to the client:
console.log("Building wav file.");
wavFileBlob = recorderObj.buildWavFileBlob();
console.log("Downloading...");
wavFileBlob.downloadLocally();
//Re-enable the start button after saving:
document.getElementById("button_startRecording").disabled = false;
document.getElementById("button_startRecording").style.display = "block";
}
</script>
</body>
</html>