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

13,486

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.

Share:
13,486
spyfx
Author by

spyfx

Updated on June 04, 2022

Comments

  • spyfx
    spyfx almost 2 years

    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.