CODEWITHSUNDEEP
javascriptjqueryhtmlflashaudio
spyfx
spyfx

Reputation: 1351

Record and upload (to server) audio with HTML5/Flash

I know that getUserMedia() wont be supported in a few browsers so I have to use more or less a flash based audio recorder. Its very important for me to upload the captured audio to a server via POST even if I could get access to the clientside captured audio would be pretty awesome. So do you guys know a libary/plugin/extension to do this?

I found some scripts as well like:
https://github.com/mattdiamond/Recorderjs
https://github.com/jwagener/recorder.js/

But the upload doesnt work. I dont know how I could continue.

Upvotes: 3

Views: 14458

Answers (1)

Remus Negrota
Remus Negrota

Reputation: 674

You can save the recorded data as a blob and then use a FileReader to upload the data via POST with AJAX.

Something similar along these lines:

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);
}

This code is taken directly from the gitHub project Recordmp3js available here: https://github.com/nusofthq/Recordmp3js

It records audio and saves it MP3 format using just HTML5 and JS and then uploads the data on the webserver.

It only works on Chrome and Firefox though.

Upvotes: 5

Related Questions