Загрузите аудиоблок после преобразования из wav в 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.');

    }
}

Мне нужно записать аудио в браузере (короткие клипы, голосовой, моно) и загрузить его в формате mp3. В этом от Криса Гейрмана есть почти все, что мне нужно, за исключением того, что вместо использования firebase я хотел бы использовать jquery для загрузки звуковых блобов в папку на моем сервере. Я новичок во всем этом, но предполагаю, что мне нужно заменить функцию saveAudio() моей собственной функцией uploadAudio() jquery(?) (Что-то вроде этого), которая будет ссылаться на скрипт в /upload.php. Пока все хорошо (?), Но я не могу понять из сценария Криса, что именно я должен загружать / передавать в /upload.php. Я планирую реализовать здесь сценарий.

Answer 1

Хорошо, на случай, если это поможет кому-то, кому мне удалось заставить его работать, используя это от 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);
}

Заменить test.wav с любым подходящим - в моем случае BlahBlah.mp3. Затем, чтобы сослаться на каплю из сценария Криса Гейрмана, изменитеuploadAudio( blob ); к uploadAudio( mediaObj.blob );.

Имейте в виду, что с этой настройкой на локальном хосте для преобразования из wav в mp3 и перемещения в каталог загрузок потребовалось 2 минуты звука 1'40 дюймов. Следующее задание, создание индикаторов выполнения и т. Д.!

Upload.php (еще раз спасибо, 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);
?>