title: How to properly slice an audio file using recorder.js, getUserMedia and blob.slice?
body: <p>I'm building a simple recording app using HTML5 and I'm trying to split the files into smaller bits and save each bit to the web server in an effort to simulate live streaming? I've gotten the code to record and split but for some reason only the first slice will record. The rest are have data but will not play (at least not in vlc)</p>
  
  <p>Here is the code:</p>
  
  <pre><code> window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  
      var audio = document.querySelector('audio');
  
  
    var context = new webkitAudioContext();
    var recorder;
    var lastByte = 0;
    var intv;
    var fileCount = 1;
  
    var onFail = function(e) {
      document.getElementById("results").innerHTML = "An error Occured&lt;br /&gt;" + e;
    };
  
    var onSuccess = function(s) {
      var mediaStreamSource = context.createMediaStreamSource(s);
      recorder = new Recorder(mediaStreamSource);
      recorder.record();
      intv = setInterval(function(){getSnippet();} , 3000);
    }
  
    function startRecording() {
      if (navigator.getUserMedia) {
          document.getElementById("results").innerHTML = "Starting....";
          navigator.getUserMedia({audio: true}, onSuccess, onFail);
      } 
      else {
        document.getElementById("results").innerHTML = "Get User Media not Present/Active";
      }
    }
  
    function stopRecording() {
          recorder.stop();
          clearInterval(intv);
          recorder.exportWAV(function(s) { console.log(s);
          saveSnippet(s, "Final"); 
          audio.src = window.URL.createObjectURL(s);
          });
  
    }
  
    function getSnippet(){
      recorder.exportWAV(function(s) { 
          //Slice the unsaved part of the file
          slc = s.slice(lastByte, s.size, s.type );
          console.log("Start: " + lastByte + "; End: " + s.size + "; FileName:  " + fileCount);
          saveSnippet(slc, fileCount); 
          lastByte = s.size;
          fileCount++;
          });
      //recorder.exportWAV(function(s) { saveFile(s); });
    }
  
    function saveSnippet(s, fname){
      var fd = new FormData();
      fd.append('fname', fname + '.wav');
      fd.append('fileToUpload', s);
      $.ajax({
          url: 'savefile.php',
          type: 'POST',
          data: fd,
          processData: false,
          contentType: false,
          success: function(data){ document.getElementById("results").innerHTML = "File Saved: &lt;br /&gt;" + data;},
          error: function(jqXHR, textStatus, errorMessage) {  document.getElementById("results").innerHTML = errorMessage; }
      });
    }
  </code></pre>
  
  <p>Is there something that I am doing wrong, why would the first file record but no subsequent files?
  I'm a complete newbie so please be gentle. If there's a better way to do this I'm all ears!</p>
  
  <p>As requested here's the code for savefile.php</p>
  
  <pre><code>    if(count($_FILES) &gt; 0 ){
      echo "Data Found&lt;br /&gt;";
      echo $_FILES['fileToUpload']['tmp_name'];
      $fl = file_get_contents($_FILES['fileToUpload']['tmp_name']);
      echo "&lt;br /&gt;File Uploaded: " . file_put_contents("uploads/" . $_POST['fname'], $fl, FILE_APPEND);
  }
  </code></pre>