1

I'm using an audio recorder from this place

http://webaudiodemos.appspot.com/AudioRecorder/index.html,

but I instead of saving the file locally I would like to upload it back to the server. My best shot was to try to modify the Recorder.setupDownload function in recording.js script to pass the blob it creates to a simple upload PHP script I found here:

<?php
if(isset($_FILES['image'])){
    $errors= array();
    $file_name = $_FILES['recording']['name'];
    $file_size =$_FILES['recording']['size'];
    $file_tmp =$_FILES['recording']['tmp_name'];
    $file_type=$_FILES['recording']['type'];   
    $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
    $extensions = array("wav");         
    if(in_array($file_ext,$extensions )=== false){
     $errors[]="extension not allowed, please choose wav file."
    }
    if($file_size > 2097152){
    $errors[]='File size under 20MB';
    }               
    if(empty($errors)==true){
        move_uploaded_file($file_tmp,"images/".$file_name);
        echo "Success";
    }else{
        print_r($errors);
    }
}
?>

And I'm tring it using a jquery call,

    $.ajax({
            type: "POST",
            url: "../scripts/Single-File-Upload-With-PHP.php",
            data: blob
    });

But I'm obviously doing something wrong. The original PHP script has a form in it used for input, which I commented out trying to call the php code directly.

So my questions would be;

  • how to modify the Recorder.setupDownload to upload the file to a designated folder?
  • how to report back when something goes wrong?

Or alternatively, is there a more elegant solution?

Edit: Regarding what's in the blob

This is how the blob is being defined in recorder.js:

worker.onmessage = function(e){
      var blob = e.data;
      currCallback(blob);
}

As to my understanding it is created with methods listed in recorderWorker.js (link in comments), and it should contain simply a wav file.

3
  • To determine if somethign went wrong you should use the success and error methods in your ajax call. i.e. success: function(data) { /* do something with data */} - Personally, I prefer to output json from within my php scripts. i.e {"errors": {"file":"file is too big"}} - then you simply are checking if errors exists, and then outputting errors.file
    – skrilled
    Mar 28, 2014 at 19:38
  • 1
    it seems your not actually sending the file because you don't provide a parameter that contains the filename, element or actual file
    – aelgoa
    Mar 28, 2014 at 19:40
  • Pls see my edit. The blob is being created recorderWorker.js [2]: webaudiodemos.appspot.com/AudioRecorder/js/recorderjs/… Mar 28, 2014 at 23:50

2 Answers 2

0

I dont think you should create the blob in the worker, but I had a similar setup (actually based on the same example) where I retrieved the samplebuffers from the worker and save them into the m_data fields of an AudioMixer class that did some stuff to the recording, then:

//! create a wav file as blob
WTS.AudioMixer.prototype.createAudioBlob = function( compress ){
    // the m_data fields are simple arrays with the sampledata
    var dataview = WTS.AudioMixer.createDataView( this.m_data[ 0 ], this.m_data[ 1 ], this.m_sampleRate );
    return( new Blob( [ dataview ], { type:'audio/wav' } ) );
}

WTS.AudioMixer.createDataView = function( buffer1, buffer2, sampleRate ){
    var interleaved = WTS.AudioMixer.interleave( buffer1, buffer2 );
    // here I create a Wav from the samplebuffers and return a dataview on it
    // the encodeWAV is not provided..
    return( WTS.AudioMixer.encodeWAV( interleaved, false, sampleRate ) );
}

then to send it to the server

var blob = this.m_projectView.getAudioEditView().getAudioMixer().createAudioBlob();
if( blob ){
    //! create formdata (as we don't have an input in a DOM form)
    var fd = new FormData();
    fd.append( 'data', blob );

    //! and post the whole thing @TODO open progress bar
    $.ajax({
        type: 'POST',
        url: WTS.getBaseURI() + 'mixMovie',
        data: fd,
        processData: false,
        contentType: false
    } );
}

and I had a node server running where the blob was sent to and could be picked up directly as a wav file, using the express node module:

var express = require( 'express' );

// we use express as app framework
var app = express();

/** mixMovie expects a post with the following parameters:
  * @param 'data' the wav file to mux together with the movie 
  */
app.post( '/mixMovie', function( request, response ){

    var audioFile = request.files.data.path;
    ....

} );

hope this helps..

Jonathan

1
  • Just one detail pls, do you mean node.js with "node server"? Could you post also an example or a hint please? Mar 29, 2014 at 15:18
0

In the end this worked nicely for me:

recorder.js:

$.ajax(
      {
       url: "./scripts/upload.php?id=" + Math.random(),
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(data){
                    alert('Your message has been saved. \n Thank you :-)');
                } 
       });

And the upload script itself:

<?php
if(isset($_FILES['data']))
{   
    echo $_FILES['data']["size"];
    echo $_FILES['data']["type"];
    echo $_FILES['data']["tmp_name"];

    $name = date(YmdHis) . '.wav';

    move_uploaded_file($_FILES['data']["tmp_name"],"../DEST_FOLDER/" . $name);

}
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.