Barebones API for the Barebones Recorder

Embedding the recorder in a web page

The recorder is a SWF file, so it must be embedded into the web page. You can use Adobe's embed code, but using the swfobject is much easier and more standards-friendly.

Embedding using the swfobject is a two-step process. First, you must load the Javascript file into your web page. Google hosts the file, so you can load it from Google thusly:

Second, you call the swfobject and pass it parameters thusly:

	window.onload = function(){

		var flashvars = {};
		flashvars.myFilename="test003";
		flashvars.myServer="http://fubar.com/snafu/";
		flashvars.myHandler="save.php";
		flashvars.myDirectory="uploads";
		flashvars.timeLimit="30";
		flashvars.showLink="Y";
		
		swfobject.embedSWF("barebonesRecorder5.swf?ID="+Math.random()*100,"recorderDIV","400","200","10.1", "expressInstall.swf", flashvars, parameters, attributes);
	}

The parameters are described in detail below.

Sending parameters to the recorder at load time

The following variables must be passed to the recorder (via the Flashvars in the embed code):

Variable	Value
myFilename	A string that tells the recorder what to name the recording. E.g., test001
myServer	The full URL of the website where the save script is. Must end in a trailing slash, e.g., http://fubar.com/snafu/
myHandler	The name of the script that handles the file upload, e.g. save.php
myDirectory	Name of the directory in which to save the recording, e.g., uploads
timeLimit	Maximum time limit of recordings, in seconds, e.g., 30
showLink	Whether or not to show a link to the recording after it has been uploaded. Values can be Y or N

Creating an HTML Interface

You can hide the recorder (embed as usual, but set the width and height to 1 pixel), and use Javascript to interact with the recorder. Create your own HTML-based interface.

Sending Commands to the Recorder

Your interface must communicate with the recorder, which is embedded in the web page (although invisible). You should use this approach to locating the embedded SWF will overcome cross-browser differences in the DOM: When embedding the recorder, be sure to pass the attributes.name and attributes.id in the embed code.

	window.onload = function(){

		var flashvars = {};
		flashvars.myFilename="test003";
		flashvars.myServer="http://fubar.com/snafu/";
		flashvars.myHandler="save.php";
		flashvars.myDirectory="uploads";
		flashvars.timeLimit="30";
		flashvars.showLink="Y";
		
		var parameters = {};
		var attributes = {};
		attributes.id="recorder";
		attributes.name="recorder";
		
		swfobject.embedSWF("barebonesRecorder5.swf?ID="+Math.random()*100,"recorderDIV","1","1","10.1", "expressInstall.swf", flashvars, parameters, attributes);
	}

Controlling the recorder via Javascript

The recorder will accept the following Javascript commands from the host web page:

Command	Function:
sendRecord	Begins recording
sendStop	Stops recording or playing
sendPlay	Begins playback
sendPause	Pauses recording or playback
sendSave	Begins the save process
sendCancel	Discards the recording and re-initializes the recorder

Accepting messages from the recorder

The recorder calls Javascript functions and sends the functions data representing status messages from the recorder. You use that data to update your interface.

recorderMessage (x:int)

An integer representing a status code. The status codes are listed in this table:

Value	Status Event
0	Not licensed for this domain. Entering demo mode (max. 10 second recording time)
1	Recorder initialized, ready to record
2	Recording
3	Stopped recording
4	Stopped playback
5	Ready
6	Playing
7	Starting to save
8	Nothing to save (error)
9	Truncating recording to 10 seconds (in demo mode)
10	Encoding to MP3
11	Encoding progress
12	Encoding error
13	Encoding complete
14	Uploading the MP3 file to the server
15	Upload complete
16	Paused recording
17	Paused playback

recorderEncodingProgress (x:int)

Sends an integer indicating the progress of the MP3 encoding process, expressed in percent (e.g., 25 indicates that the encoding is 25% completed).

recorderMeter (x:int)

Sends an integer indicating the activity level of the microphone. Expressed in a number between 0 and 100.

recorderTime (x:String)

Sends time in a formatted string. While recording, shows the length of time remaining (counting down from the maximum recording length). During playback, shows elapsed playback time.

recorderUpload (x:String)

Sends a "success" message when the recorder has successfully uploaded the file. If the showLink value is Y, includes a link to the MP3 file.

Following is a complete HTML file with all the Javascript commands and a basic HTML interface





Barebones Audio Recorder











	Bare-bones HTML controls
	
	
	
	
	
	
	

	
		
			recorder message:
			 
		
		
			meter (raw number):
			 
		
			meter (rendered):
			
		
		
			recorder time:

recorder message:
meter (raw number):
meter (rendered):
recorder time: