使用HTML5 / Flash录制和上传（到服务器）音频

Question

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.

Answer 1

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.