Upload audio blob after conversion from wav to mp3

Question


function init() {
    var cfg = {};
    audio = new Recorder(cfg);
}

function toggle( btn ){ // audio && audio.record();

    if(audio instanceof Recorder){


        var btnLabel = btn.firstChild.nodeValue;

        if( btnLabel === 'Record' ){
            audio.record();
        }else{
           audio.stop();
           createPreview( 'recordings' );
           audio.clear();
        }

        btn.firstChild.nodeValue = (btnLabel === 'Record') ? 'Stop' : 'Record';
        btn.setAttribute('class', (btn.getAttribute('class') === 'btn btn-primary') ? 'btn btn-danger' : 'btn btn-primary');

    } else {
        init();
        toggle( btn );
    }

}

function createPreview( containerId ) {
    // audio && audio.exportWAV( function(blob) {

    var targetContainer = document.getElementById( containerId );
    var timestamp = new Date().getTime();
    var filename = 'recording_'+ timestamp;
    var div = document.createElement('div');

    var linkMP3 = document.createElement('a');
        linkMP3.setAttribute('id', 'MP3-'+ timestamp);

    var iconMP3 = document.createElement('img');
        iconMP3.setAttribute('src', 'images/i-mp3.jpeg');
    
    var linkWAV = document.createElement('a');
        linkWAV.setAttribute('id', 'WAV-'+ timestamp);

    var iconWAV = document.createElement('img');
        iconWAV.setAttribute('src', 'images/i-wav.jpeg');

    var player = document.createElement('audio');
        player.setAttribute('id', 'PLAYER-'+ timestamp);
        player.controls = true;
    
    div.appendChild(player);
    div.appendChild(linkWAV);
    div.appendChild(linkMP3);
    targetContainer.appendChild(div);
    
    audio.export( function( mediaObj ) {

        if( mediaObj.blob.type == 'audio/mp3' ){

            var url = mediaObj.url;
            targetLink = document.getElementById( 'MP3-'+ timestamp );
            
            targetLink.href = url;
            targetLink.download = filename +'.mp3';
            targetLink.innerHTML = targetLink.download;

            saveAudio( url, filename );
          
        } else { // 'audio/wav'

            var url = URL.createObjectURL( mediaObj.blob );
            targetPlayer = document.getElementById( 'PLAYER-'+ timestamp );
            targetLink = document.getElementById( 'WAV-'+ timestamp );
            
            targetPlayer.src = url;
            targetLink.href = url;
            targetLink.download = filename +'.wav';
            targetLink.innerHTML = targetLink.download;

        }
    });
}

function saveAudio( url, filename ){

    var firebaseUrl = 'your_firebase_url';

    if(firebaseUrl !== 'your_firebase_url'){
        
        console.info('>> saving audio: url');
        console.log( url );

        ref = new Firebase( firebaseUrl );
        ref.set({
            filetype: 'audio/mp3',
            base64Str: url,
            filename: filename +'.mp3'
        });
    
    }else{

        console.warn('Audio not saved to firebase because firebaseUrl is undefined.');

    }
}

I need to record audio in the browser (short clips, spoken voice, mono) and upload it in mp3 format. This by Chris Geirman has almost everything that I need, except that instead of using firebase, I'd like to use jquery to upload audio blobs to a folder on my server. I'm fairly new to all of this, but I'm guessing that I need to replace the saveAudio() function with my own uploadAudio() jquery(?) function (something like this), which will link to a script in /upload.php. So far so good (?), but I can't figure out from Chris's script exactly what it is that I should be uploading / passing to /upload.php. I'm planning to implement the script here.

score 0 · Answer 1 · answered Jul 02 '20 at 06:16

OK just in case it helps anyone I managed to get it working using this from Soumen Basak.

function uploadAudio( blob ) {
  var reader = new FileReader();
  reader.onload = function(event){
    var fd = {};
    fd["fname"] = "test.wav";
    fd["data"] = event.target.result;
    $.ajax({
      type: 'POST',
      url: 'upload.php',
      data: fd,
      dataType: 'text'
    }).done(function(data) {
        console.log(data);
    });
  };
  reader.readAsDataURL(blob);
}

Replace test.wav with whatever applies - in my case BlahBlah.mp3. Then to reference the blob from Chris Geirman's script, change uploadAudio( blob ); to uploadAudio( mediaObj.blob );.

Be aware that with this set up on localhost, 2 mins of audio took 1'40" to convert from wav to mp3 and move to the uploads directory. Next job, create progress bars, etc!

Upload.php (Thanks again Soumen Basak):

<?
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data,
$filename = $_POST['fname'];
echo $filename;
// write the data out to the file
$fp = fopen($filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>

Upload audio blob after conversion from wav to mp3

1 Answers1