The Visual Recorder

Features:

Requirements:

Deploying the recorder on your own website:

1. Buy a license key.

The recorder requires a license key in order to work without restrictions on recording length. When the recorder initializes in the web page, it reads the license key. If the license key is valid, all limitations are relaxed. If there is no license key, or if the license key is invalid, the recorder enters "demo mode." In demo mode, all recording and playback functions are enabled, but when you save a recording, it is limited to 10 seconds in length.

License keys are locked to your domain. A license key will only work for the domain that is was generated for. If you buy a license key for mycoolsite.com, the license key will only register the recorder for that domain. If you try to use that license key for myothercoolsite.com, the key will not be valid, and the recorder will enter demo mode.

License keys will work on subdomains of your domain name. A license key will work for subdomains as well as the root level of your domain. If you buy a license key for mycoolsite.com, the license key will work for mycoolsite.com, www.mycoolsite.com, and will also work for cooler.mycoolsite.com, reallycool.mycoolsite.com, etc.

2. Configure the embed code.

It is recommended to use the "SWFObject" Javascript library to embed the recorder. This is a standards-friendly, flexible method for embedding Flash elements in a web page.

You can load the library from Google's code repository by including this line of script before the embed code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Embed the recorder in your page with this chunk of Javascript code:

<script type="text/javascript">

	window.onload = function(){
		var flashvars = {};
		flashvars.filename="whatever_you_want_to_name_your_file";
		flashvars.server="http://path.to.your.server/directory/";
		flashvars.handler="save.php";
		flashvars.allowupload="Y";
		flashvars.allowdownload="Y";
		flashvars.licensekey="paste_your_license_key_here";
		flashvars.bitrate="64";

		var parameters = {};
		var attributes = {};
		attributes.id="recorder";
		attributes.name="recorder";
		
		swfobject.embedSWF("visualrecorder.swf?ID="+Math.random(),"recorderDIV","500","265","11.2", "expressInstall.swf", flashvars, parameters, attributes);
	}

</script>

The embed code passes several variables to the recorder:

filename: This is the name of the file to be saved when you download or upload your recording. You can use server-side programming to change the value of this parameter.

server: This is only necessary if you will allow users to upload recordings to your server. It is important to use a fully-qualified domain name, and to end the URL with a slash (/).

handler: This is only necessary if you will allow users to upload recordings to your server. This is the name of the server-side script that will handle the file upload. Any server-side programming language that can handle standard HTTP file uploads will work, including PHP, .Net, Python, etc.

allowupload: If you pass "Y" for a value, the "upload" button will appear in the recorder. Otherwise, the button will not be visible.

allowdownload: If you pass "Y" for a value, the "download" button will appear in the recorder. Otherwise, the button will not be visible.

licensekey: This is the string of text that you received when you purchased a license. If you lose this key, you can use the web form to recover your license key.

bitrate: This is only necessary if you want to save files in MP3 format, and don't want to use the default value of 128 kbps. Allowable values for this variable are 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256 and 320


Using the Recorder:

Recording audio

Use the Record, Stop and Play buttons to record audio from your computer's microphone.

Importing audio

Click the "open" button to browse your computer's file system for an MP3 file to import into the recorder.

Note: Audio files must be decompressed in order to enable editing and re-encoding. Large audio files will use large amounts of your computer's system resources. It is not recommended to use the Visual Recorder to edit files longer than a few minutes in duration.

Editing audio

You can remove sections of an audio file by using the mouse to select sections of the waveform, then clicking the "trim" button. That section of the audio file will be removed.

Insert a new recording into an audio file by first clicking on the waveform in the location where you want to insert the recording, then using the "record" and "stop" buttons to add a recording. As soon as you click the "stop" button, the new recording will be inserted into the audio file, and the waveform will be redrawn.

Clearing highlighted areas

Click the "rewind" button to clear highlighted areas and return the playhead to the beginning of the recording.

Saving and Uploading recordings

Before a recording can be saved as an audio file, it must first be converted to a WAV or MP3 file. Click the "WAV" or "MP3" button to convert the recording to the corresponding file format.

After you have converted your recording, you can save it to your computer, or upload it.

Uploading recordings to your server

If you want to allow users to upload recordings to your server, you must configure your server to handle file uploads. This usually means creating a folder/directory on your server to store the recordings, giving that folder the appropriate permissions, and adapting the "save.php" file to accommodate your server's specific requirements for handling file uploads.

If none of that made sense to you, then you may have to consult with an expert to assist you in configuring your website before you can accept file uploads on your website.


Still have questions? Contact me:

Den Hoopingarner
dhoopingarner@gmail.com