Recording sound using microphone users using HTML5

Question

I am very close to having a small project, but I ran into a small problem that I seem to be unable to understand on my own. What I ultimately want to do is record the user's voice from the users ’microphone and then upload the recording to my server when they are done. I am using the code from this project: https://github.com/cwilso/AudioRecorder

It works fine, but I need to add a function that is not included in the kit. I need to be able to upload a file to my server after recording is complete. With the default code, the file can be downloaded locally to my computer, but not downloaded. So I did some research, and I came across another similar project that has a download function. However, in my opinion, the rest of the project is more difficult. So I tried to add the “download code” from the following project: https://github.com/nusofthq/Recordmp3js

Javascript Code:

function uploadAudio(mp3Data){ var reader = new FileReader(); reader.onload = function(event){ var fd = new FormData(); var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3'); console.log("mp3name = " + mp3Name); fd.append('fname', mp3Name); fd.append('data', event.target.result); $.ajax({ type: 'POST', url: 'upload.php', data: fd, processData: false, contentType: false }).done(function(data) { //console.log(data); log.innerHTML += "\n" + data; }); }; reader.readAsDataURL(mp3Data); } 

PHP code:

 <?php if(!is_dir("recordings")){ $res = mkdir("recordings",0777); } // pull the raw binary data from the POST array $data = substr($_POST['data'], strpos($_POST['data'], ",") + 1); $filename = urldecode($_POST['fname']); // write the data out to the file $fp = fopen('recordings/'.$filename, 'wb'); fwrite($fp, $decodedData); fclose($fp); ?> 

I tried to combine this code with a project located at https://github.com/cwilso/AudioRecorder , but to no avail. What do I need to change in the Javascript code above and where do I need to place it? Any help is much appreciated!

PS: I know that this only works in Chrome, FireFox and Opera.

Answer 1

I recently implemented a similar task that you are trying to achieve using similar resources. You did not indicate that you need audio downloaded as mp3, so I will just show you how to download wav using recorderjs using the source found here: https://github.com/cwilso/AudioRecorder

First of all, recordings store uncompressed wav in a var called blob. This happens on line 101 of the js recorder, more specifically in this function:

 worker.onmessage = function(e){ var blob = e.data; currCallback(blob); } 

The problem is that blob is locally declared in this function. We need to use it again, so for this example, let's make it very easy to achieve and make it global. Therefore, declare the blob variable outside the js logger as follows:

 var blob = null; 

Then change the above function in recorderjs to save the data inside the globally declared blob variable, the function should look like this:

 worker.onmessage = function(e){ blob = e.data; currCallback(blob); } 

Now we can use the "blob". Now declare the following function,

 function uploadAudio(){ var fd = new FormData(); var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav'); console.log("wavName = " + wavName); fd.append('fname', wavName); fd.append('data', blob); $.ajax({ type: 'POST', url: 'upload.php', data: fd, processData: false, contentType: false }).done(function(data) { //console.log(data); log.innerHTML += "\n" + data; }); } 

Your server side code should use this:

 <?php if(!is_dir("recordings")){ $res = mkdir("recordings",0777); } move_uploaded_file($_FILES["file"]["tmp_name"], $res . $_FILES["file"]["fname"]); ?> 

Note: $ _FILES ["file"] ["tmp_name"] is what it looks like. Temporary file location. This is done for you with ajax call and form data.

Good luck, let me know if you have any problems.

Answer 2

As far as I can see, AudioRecorder exports as Blob. Blobs is something you can easily download using XMLHttpRequest (and XMLHttpRequest downloads is something you can easily find on Google). In short, you don't need a FileReader (and may even skip FormData since you only download one Blob).

Keep in mind that people tend not to answer questions that indicate a lack of preliminary OP analysis; in this case, you would have to explain at least a) what data you should download, and b) what exactly does not work in your existing implementation. Here you really ask people to cross two libraries (most of us have never used one, not to mention all). The truth is that I might be wrong about Blobs, but you actually know it better than me and you just haven’t reported it. (Don't get me wrong, I hope I'm right and you will receive your code soon.)