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.

Thanks Rory for your time. It is the blob which I want to send — Nauman Zafar, Aug 05 '16 at 07:15
Ok, but how were they generated? Are you sure they are binary data as the error would indicate otherwise — Rory McCrossan, Aug 05 '16 at 07:18
Yes they are generated. Everything till recording and playing back on current document works fine. — Nauman Zafar, Aug 05 '16 at 07:19

guest271314 · Answer 1 · 2016-08-05T07:38:42.773

0

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");
    });

});

edited Aug 05 '16 at 07:38

answered Aug 05 '16 at 07:27

guest271314

1
15
104
177

Please check the Edit section of the question. This is how I am getting the blob ! – Nauman Zafar Aug 05 '16 at 07:36
@NaumanZafar Substitute `audio_files[0]` for `e.target.files[0]`, see updated post – guest271314 Aug 05 '16 at 07:37
I've already checked that. But it doesn't work. You are right, It should work but i am not able to spot a reason of this behavior – Nauman Zafar Aug 05 '16 at 07:50
_"But it doesn't work."_ Can you describe "doesn't work"? Try sending `Blob` without additional data, using `file_get_contents("php://input")` at `php`, see also http://stackoverflow.com/questions/38676275/html-file-save-how-to-overcome-the-2k-limit-on-get-note-post-does-not-work/, http://stackoverflow.com/questions/38236047/generate-png-file-with-php-from-datauri-sent-through-ajax – guest271314 Aug 05 '16 at 07:59
I have checked another way of sending `BLOB`. Please check the updated question ( Edit 2) . If you have anything to comment. – Nauman Zafar Aug 05 '16 at 11:58

score 0 · Answer 2 · answered Jun 05 '20 at 08:36

0

To access the audio via request["audio_data"] just add .read() to end and store it in a variable

x=request["audio_data"].read()

answered Jun 05 '20 at 08:36

Ajit

1

Sending Audio Blob to server

2 Answers2

Linked