jRecorder

jRecorder is a jQuery plugin to enable a flash recorder in your webpages. You DON'T need to have a flash streaming server or RED5 server to do this recording.

Download the plugin: jRecorder.zip

Author: Sajith Amma

Add your feedback here.

Features

You DON'T need any flash knowledge to implement this recorder in your web page

you DON'T need a flash media server (RED5) for recording audio

You can design your record button, recording progress bar, recording input sound level with HTML+ CSS

You can save the recorded audio file in WAV format into your PHP server, using 2 lines of PHP code

This recorder record voice using browser's flash and save in browser temporary and when user finish recording, it send the file as POST to your PHP server (a php file)

*NEW: You can preview the recorded voice before sending to Server

Usage

Create your basic html page. Download the plugin here. Unzip and place the jRecorder.js file, jRecorder.swf file into your webserver. Also place the jquery.min.js file. (You can skip this if you have already jQuery added in your website) You can see an example integration here

    <script src="jquery.min.js"> </script>
    <script src="jRecorder.js"> </script>

Syntax:

      
      $.jRecorder( {settings}, element - optional );

Example:

      
var settings = {
		
   'rec_width': '300',
   'rec_height': '200',
   'rec_top': '0px',
   'rec_left': '0px',
   'recorderlayout_id' : 'flashrecarea',
   'recorder_id' : 'audiorecorder',
   'recorder_name': 'audiorecorder',
   'wmode' : 'transparent',
   'bgcolor': '#ff0000',
   'swf_path': 'jRecorder.swf',
   'host': 'acceptfile.php?filename=hello.wav',
   'callback_started_recording' : function(){},
   'callback_finished_recording' : function(){},
   'callback_stopped_recording': function(){},
   'callback_error_recording' : function(){},
   'callback_activityTime': function(time){},
   'callback_activityLevel' : function(level){}
};

//initialise the recorder            
$.jRecorder( settings ); //insert the flash object under 'body' tag

Or

$.jRecorder( settings , $("#flashdivarea")); //insert the flash object under element with id flashdivarea

Parameter Details

rec_width (Optional): Width of the audio recorder. Minimum width is 300 [to display flash security allow/deny accessing mic]
rec_height (Optional): Height of the audio recorder. Minimum width is 200 [to display flash security allow/deny accessing mic]
rec_top (Optional): Position of the flash recorder. It internally use style: top
rec_left (Optional): Position of the flash recorder. It internally use style: left
recorderlayout_id (Optional): Id of the div where flash object is going to insert. If needed for future use
recorder_id (Optional): Id of the flash recorder object
recorder_name (Optional): Name of the flash object
wmode (Optional): Default is transparent. Better to keep this
bgcolor (Optional): Default is white, you can change this based on your website settings
swf_path (Optional): This is important to set if you change the swf file to some other folder. If both html and swf files are in same folder, you can leave this field.
host (Mandatory): The PHP file http location where the recorded WAV file is posted. See acceptfile.php area
callback_started_recording (Optional): Function to be called when recording starts
callback_stopped_recording (Optional): Function to be called when recorder ends
callback_finished_recording (Optional): Callback function to be called when recording is finished
callback_error_recording (Optional): Callback for recording error
callback_activityTime (Optional): Callback for returning current recording time as paremeter
callback_activityLevel (Optional): Callback for returning current mic input level (0-100)

Upload the recorded WAV to Webserver

You have 'host' parameter in the plugin to say to which file the recorded audio file should be posted. You need to use the full path here.
eg: http://yourhost.com/acceptfile.php
When the recording finishes, the recorder plays the preview automatically. To send the recorded wav file to server, you need to call $.jRecorder.sendData();

You can add as many parameter to your url as you wish, eg: http://yourhost.com/acceptfile.php?filename=hello.wav&recorded_user=23&etc

In the PHP file, here it is acceptfile.php, you can write the following code to receive the file


   

   $upload_path = dirname(__FILE__). '/';
   
   //here assume that filename parameter is passed. or your can write $filename= 'test.wav';
   $filename = $_REQUEST['filename'];
   
   $fp = fopen($upload_path."/".$filename.".wav", "wb");
   
   fwrite($fp, file_get_contents('php://input'));
   
   fclose($fp);
   
   exit('done');

Here file_get_contents('php://input') function does the action to accept a wav file flash imported to webserver. You can save this file to anywhere as you wish.

You can download the example from the zip file.