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.hideFlash ="N";
		flashvars.uploadMsg = "Your recording was uploaded.";
		flashvars.uploadLink="Download it here";

		var parameters = {};
		var attributes = {};"recorder";"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):

myFilenameA string that tells the recorder what to name the recording. E.g., test001
myServerThe full URL of the website where the save script is. Must end in a trailing slash, e.g.,
myHandlerThe name of the script that handles the file upload, e.g. save.php
myDirectoryName of the directory where recordings are saved, e.g., uploads (this is only to enable downloads)
timeLimitMaximum time limit of recordings, in seconds, e.g., 30
showLinkWhether or not to show a link to the recording after it has been uploaded. Values can be Y or N
licensekeyThe license key that you purchased to unlock the recorder. It will be a long string of text something like this: 2317e23c2a080396968d6ef2ddec8302. A license key is locked to one domain. If the license key is wrong, incomplete, or for the wrong domain, the recorder will enter into demo mode.

Optional Parameters

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

uploadMsgSort message to display when the file has been uploaded, e.g., "upload was successful."
uploadLinkIf you want users to be able to download their recordings, this is the link text, e.g., "download."
bitRateThe compression bit rate of the MP3 file. Default is 128. Allowable values are 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256 and 320.
recordLabelTextLabel for the RECORD button
stopLabelTextLabel for the STOP button
playLabelTextLabel for the PLAY button
pauseLabelTextLabel for the PAUSE button
cancelLabelTextLabel for the CANCEL button
saveLabelTextLabel for the SAVE button
hideFlashSend "Y" to make the Flash interface invisible.

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:

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:


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 and in the embed code.
	window.onload = function(){

		var flashvars = {};
		var parameters = {};
		var attributes = {};"recorder";"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:

sendRecordBegins recording
sendStopStops recording or playing
sendPlayBegins playback
sendPausePauses recording or playback
sendSaveBegins the save process
sendCancelDiscards the recording and re-initializes the recorder
setFilename(x:string)Changes the name of the MP3 file that the recorder creates
setTimeLimit(x:int)Changes the time limit of the recording
doScrub(x:int)Move the playhead to the position x seconds in the recording
showSettingsDisplay the Flash permissions dialog

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:
ValueStatus Event
0Not licensed for this domain. Entering demo mode (max. 10 second recording time)
1Recorder initialized, ready to record
3Stopped recording
4Stopped playback
7Starting to save
8Nothing to save (error)
9Truncating recording to 10 seconds (in demo mode)
10Encoding to MP3
11Encoding progress
12Encoding error
13Encoding complete
14Uploading the MP3 file to the server
15Upload complete
16Paused recording
17Paused playback
18The microphone has been disabled
19The microphone has been enabled

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

Barebones Audio Recorder version 7

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
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: