HTML5 & getUserMedia - Record Audio & Save to Web Server after Certain Time
17,799
can use XMLHttpRequest
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload.aspx', true);
xhr.onload = function (e) {
var result = e.target.result;
};
xhr.send(blobOrFile);
}
// stop recording function calls the upload method
// I am using recorder.js
recorder.exportWAV(function (blob) {
var url = URL.createObjectURL(blob);
audio.src = url;
audio.controls = true;
var hf = document.createElement('a');
hf.href = url;
hf.download = new Date().toISOString() + '.wav';
upload(blob);
});
// on server side ASPX pageload - can save .wav file on server
Request.SaveAs(Server.MapPath("/foo/" + "1" + ".wav"), false);
Comments
-
Enijar almost 2 years
I'm having some difficulties with getUserMedia with HTML5 whilst developing my web page. This is the first time I've tried to implement this to record a users audio input. Flash is not an option for this project as it has to be used on mobile devices too.
I come here to see if anyone has experience with and knows how to implement an HTML5 with getUserMedia to record a users microphone for a certain amount of time (done with a session in PHP) and then saves and sends the audio file to a web server.
If this isn't possible then is there any other way, perhaps with a Java applet?
The js:
<script> var onFail = function(e) { console.log('Rejected!', e); }; var onSuccess = function(s) { var context = new webkitAudioContext(); var mediaStreamSource = context.createMediaStreamSource(s); recorder = new Recorder(mediaStreamSource); recorder.record(); // audio loopback // mediaStreamSource.connect(context.destination); } window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var recorder; var audio = document.querySelector('audio'); function startRecording() { if (navigator.getUserMedia) { navigator.getUserMedia({audio: true}, onSuccess, onFail); } else { console.log('navigator.getUserMedia not present'); } } function stopRecording() { recorder.stop(); recorder.exportWAV(function(s) { audio.src = window.URL.createObjectURL(s); }); } </script>
The HTML (linked to recorder.js from here):
<script type="text/javascript" src="recorder.js"> </script> <input onclick="startRecording()" type="button" value="start recording"> <input onclick="stopRecording()" type="button" value="stop recording and play">