Sending Audio Blob to server
<p>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.</p>

<pre><code>$('#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 = "&lt;div class='row  col-md-4'&gt;&lt;div class='col-md-offset-6'&gt;&lt;i class='fa fa-check fa-5x' aria-hidden='true'&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;";

                  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

            });
</code></pre>

<p>That gives </p>

<blockquote>
  <p>Uncaught TypeError: Illegal invocation</p>
</blockquote>

<p><strong>EDIT</strong></p>

<p>This is what <code>audio_files</code> have. </p>

<pre><code>recorder &amp;&amp; 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);
    });
</code></pre>

<p><strong>EDIT 2</strong></p>

<p>I've tried another way of sending blob using <code>XmlHttpRequest</code>. </p>

<pre><code>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);
</code></pre>

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