Barebones API for the Barebones Recorder 7

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="audiofile001";
		flashvars.myServer="http://fubar.com/snafu/";
		flashvars.myHandler="save.php";
		flashvars.myDirectory="uploads/";
		flashvars.timeLimit="30";
		flashvars.showLink="Y";
		flashvars.hideFlash ="N";
		flashvars.bitRate="64";
		flashvars.licensekey="2317e23c2a080396968d6ef2ddec8302";
		flashvars.uploadMsg = "Your recording was uploaded.";
		flashvars.uploadLink="Download it here";

		var parameters = {};
		var attributes = {};
		attributes.id="recorder";
		attributes.name="recorder";

		swfobject.embedSWF("barebonesRecorder7.swf?ID="+Math.random()*100,"recorderDIV","400","200","11.2", "expressInstall.swf", flashvars, parameters, attributes);
	}

The parameters are described in detail below.

Required Parameters

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

Optional Parameters

The following variables may be passed to the recorder to set interface options

Changing the button icons

You can specify alternative icons for the recorder buttons. Add the flashvar "imageDirectory," then include the directory and images when you deploy the recorder.

Images must be in PNG format, and named thusly:

• record: record.png
• stop: stop.png
• play: play.png
• pause: pause.png
• save: save.png
• cancel: cancel.png

For example, you may create your own icons, then place them in a directory called "mySuperIcons." When you put the recorder online, you must put the directory on the server, then add a line to the embed code:

flashvars.imageDirectory="mySuperIcons";

Images will be resized to 32x32 pixels.

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:

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:

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, y:String)

Sends two strings. The first is a general "success" message when the recorder has successfully uploaded the file. If the showLink value is Y, includes a link to the MP3 file. The second string is the text that the handler sends to the recorder. For example, you might want a specific message such as "have a nice day" after the upload has been processed. That message will be send from the recorder to the Javascript function.

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

This is a VERY basic implementation, showing how HTML elements can control the recorder. Obviously, with graphics and styling, the recorder can look like anything you like.


	
Bare-bones HTML controls
	Record
	Stop
	Play
	Pause
	Cancel
	Save
	

	

		

			
recorder message:
			
 
		
		

			
meter (raw number):
			
 
		
			
meter (rendered):
			

		
		

			
recorder time:
			
 
		
		

			
 
		
	
	
	


If the "meter (raw number)" shows a value of -1, then you probably have to set the permissions for the Flash plugin to "allow" and "remember." There is detailed information about that on this page: http://clear.msu.edu/teaching/online/ria/recordhowto/.