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.
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 |
The following variables may be passed to the recorder to set interface options
| Variable | Value |
|---|---|
| recordLabelText | Label for the RECORD button |
| stopLabelText | Label for the STOP button |
| playLabelText | Label for the PLAY button |
| pauseLabelText | Label for the PAUSE button |
| cancelLabelText | Label for the CANCEL button |
| saveLabelText | Label for the SAVE button |
| hideFlash | Send "Y" to make the Flash interface invisible. |
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:
flashvars.imageDirectory="mySuperIcons";
Images will be resized to 32x32 pixels.
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.
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);
}
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 |
| setFilename(x:string) | Changes the name of the MP3 file that the recorder creates |
| setTimeLimit(x:int) | Changes the time limit of the recording |
The recorder calls Javascript functions and sends the functions data representing status messages from the recorder. You use that data to update your interface.
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 |
Sends an integer indicating the progress of the MP3 encoding process, expressed in percent (e.g., 25 indicates that the encoding is 25% completed).
Sends an integer indicating the activity level of the microphone. Expressed in a number between 0 and 100.
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.
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