CODEWITHSUNDEEP
javascripthtmlaudiogetusermedia
TemiGiwa
TemiGiwa

Reputation: 411

How to properly slice an audio file using recorder.js, getUserMedia and blob.slice?

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)

Here is the 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<br />" + 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: <br />" + data;},
        error: function(jqXHR, textStatus, errorMessage) {  document.getElementById("results").innerHTML = errorMessage; }
    });
  }

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!

As requested here's the code for savefile.php

    if(count($_FILES) > 0 ){
    echo "Data Found<br />";
    echo $_FILES['fileToUpload']['tmp_name'];
    $fl = file_get_contents($_FILES['fileToUpload']['tmp_name']);
    echo "<br />File Uploaded: " . file_put_contents("uploads/" . $_POST['fname'], $fl, FILE_APPEND);
}

Upvotes: 2

Views: 2201

Answers (1)

NVRM
NVRM

Reputation: 13047

I am also working on it. This fork of recorder.js already done this: creating a blob to be downloadable by a link. https://github.com/mattdiamond/Recorderjs

This other fork do upload to server through an api call, this is modifiable for your needs. The other goodies of this fork is a swf recorder version which allow all browser to record easily. https://github.com/jwagener/recorder.js

So they need to be merged^^

Upvotes: 3

Related Questions