title: Javascript Blob save to variable
body: <p>I am using <a href="https://github.com/cwilso/AudioRecorder" rel="nofollow">https://github.com/cwilso/AudioRecorder</a> and everything works fine except getting the blob and sending it to the server. I have the following that sends the form data to the server. Basically, a wav file is generated on the client side, then it is stored in a blob and I want to figure out a way to get the contents of that blob.</p>
  
  <pre><code>$('#submit').click(function(){
  var formData = new FormData($('#add_slide').get(0));
  var jContent = $( "#main_container" );
  //console.log(formData);
  
  if($('#audio_file').val().length==0)
  {
  
     var blob_url = $('#blob_url').val();
      if($('#blob_url').val().length==0)
     {
         alert('Recording Could not be found. Please try again');
         return false;
     }else{
         console.log(formData);
     }
     //return false;
  }else{
      var ext = $('#audio_file').val().split('.').pop().toLowerCase();
      if(ext!== 'wav') {
          alert('Invalid File. Please use a file with extension WAV!');
          return false;
      }
  }
  
  $.ajax({
      url: 'lec_add_slide.php',  //server script to process data
      type: 'POST',
      xhr: function() {  // custom xhr
          myXhr = $.ajaxSettings.xhr();
          if(myXhr.upload){ // check if upload property exists
              myXhr.upload.addEventListener('progress',progressHandlingFunction, false);     // for handling the progress of the upload
              //console.log('OK');
          }else{
              //console.log('NOT');
          }
          return myXhr;
      },
      //Ajax events
      beforeSend: function (){
          $('#loadingModal').modal('show');
      },
      success: function (data) {
          jContent.html( data );
          $('#loadingModal').modal('hide');
      },
      error: function (){
          console.log('error');
      },
      // Form data
      data: formData,
      //Options to tell JQuery not to process data or worry about content-type
      cache: false,
      contentType: false,
      processData: false
  });
  });
  function progressHandlingFunction(e){
      if(e.lengthComputable){
      $('#bar-progress-mp3').css('width',((e.loaded/e.total)*100)+'%');
  }
  }
  </code></pre>
  
  <p>If I send a regular file using a regular file input, everything works perfectly. I have put the blob url in a hidden input field and I also tried blob.slice() but what reaches the server is just object Blob. 
  Does anyone know how to get the contents of the blob URL and send it to the server?</p>
  
  <p>Any help appreciated.</p>