Sending Audio Blob to server

Question

I am trying to send an audio blob produced by WebAudio API and Recorder.js to my Laravel Controller using jQuery's $.post method. Here is what I am trying.

$('#save_oralessay_question_btn').click(function(e){

      var question_content = $('#question_text_area').val();
      var test_id_fr = parseInt($('#test_id_fr').val());
      var question_type = parseInt($('#question_type').val());
      var rubric_id_fr = $('#rubric_id_fr').val();

      var reader = new FileReader();

      reader.onload = function(event){
           var form_data = new FormData();
           form_data.append('audio_data', event.target.result);

           var result = $.post('../questions',
                 {
                  question_content:question_content, 
                  question_type:question_type,
                  test_id_fr:test_id_fr,
                  rubric_id_fr:rubric_id_fr,

                  audio_data:form_data,
                  processData: false,
                  contentType: false
                },function(data){
                var html = "<div class='row  col-md-4'><div class='col-md-offset-6'><i class='fa fa-check fa-5x' aria-hidden='true'></i></div></div>";

                  swal({   title: "Success!",   text: data,   type: "success",  timer:2000 },function(){
                    //location.reload();
                  });

                })
                .done(function(data){

                }).fail(function(xhr, status, error){
                  sweetAlert("Error!", error, "error");
                });

                };
         reader.readAsDataURL(audio_files[0]); //this contains the blob recorded

            });

That gives

Uncaught TypeError: Illegal invocation

EDIT

This is what audio_files have.

recorder && recorder.exportWAV(function(blob) {


    audio_files.push(blob);

    var url = URL.createObjectURL(blob);
    var li = document.createElement('li');
    var au = document.createElement('audio');
    var hf = document.createElement('a');

      //console.log(typeof(url));

      au.controls = true;
      au.src = url;
      au.autoplay=true;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.download = url +'.wav';
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });

EDIT 2

I've tried another way of sending blob using XmlHttpRequest.

var xhr=new XMLHttpRequest();
xhr.onload=function(e) {
   if(this.readyState === 4) {
      console.log("Server returned: ",e.target.responseText);
    }
};
var fd=new FormData();
fd.append("audio_data",audio_files[0]);
fd.append('question_content', question_content);
fd.append('question_type', question_type);
xhr.open("POST","../questions",true);
xhr.send(fd);

Controller In the controller when I can fetch data like $request["audio_data"]. But this gives a path to a file which is as C:\wamp\tmp\phpxxx Please share how to use this data. I have seen this path but there is no file like phpxxx in the respective directory.

Answer 1

You send a data URL instead of a Blob; FileReader is not necessary if expected result is to POST Blob or File object. You can send the File object itself, as File inherits from Blob

$('#save_oralessay_question_btn').click(function(e) {

  var question_content = $('#question_text_area').val();
  var test_id_fr = parseInt($('#test_id_fr').val());
  var question_type = parseInt($('#question_type').val());
  var rubric_id_fr = $('#rubric_id_fr').val();

  var result = $.post('../questions', {
      question_content: question_content,
      question_type: question_type,
      test_id_fr: test_id_fr,
      rubric_id_fr: rubric_id_fr,    
      audio_data: audio_files[0],
      processData: false,
      contentType: false
    }, function(data) {
      var html = "<div class='row  col-md-4'><div class='col-md-offset-6'><i class='fa fa-check fa-5x' aria-hidden='true'></i></div></div>";

      swal({
        title: "Success!",
        text: data,
        type: "success",
        timer: 2000
      }, function() {
        //location.reload();
      });

    })
    .done(function(data) {

    }).fail(function(xhr, status, error) {
      sweetAlert("Error!", error, "error");
    });

});