How to Add an Audio Player to Your Page

Here are the instructions for adding a basic audio player to your web page. You will need to format your audio properly for easy web playback, but generally MP3 files will work.

Adding an audio "controller" is generally the best idea when adding audio to your site. This allows the user of your page to turn the music on and off (play and stop), as well as control volume within the controller. Audio can be added without a controller, but taking away these options from the user can come across as annoying for having music that plays and cannot be turned off or volume altered.

To add the audio controller (and accompanying audio file), you will need to work in Code mode. Select the paragraph or table cell or div where you want to place the controller, switch from Design mode to Code (or Split) mode, and add the following code into that element:

<object width="300" height="42">

<param name="src" value="FOLDER/YOUR-AUDIO-FILE.mp3">

<param name="autoplay" value="false">

<param name="controller" value="true">

<param name="loop" value="false">

<embed src="FOLDER/YOUR-AUDIO-FILE.mp3" autostart="false" loop="false" width="300" height="42" controller="true"></embed>

</object>

This text gets copied and pasted exactly as I have shown it above, where you will just need to replace "FOLDER/YOU-AUDIO-FILE.mp3" with the folder and file name for the audio you wish to use (inside your site folder, of course).

Just adding this exactly as is should give you a working audio player, but let me explain what these different parts mean. Fist off, "width" and "height" should stay as noted above (300x42) if you want to give someone an un-cropped, full controller. "src" tells it where to find your audio file. "controller" when set to "true" will show the controller. If set to "false", there will be no controller on the screen. This is how you would add audio to your site without a controller, but I personally don't recommend this. "autoplay" determines whether the audio file will play when the page opens (true or false). And "loop" determines if the file restarts whenever it reaches the end (again, true or false).

One final note is why you see essentially two different controllers contained in the code above. There really are two controllers shown here, and Dreamweaver even may give you an error acknowledging this. But this is intentional. The "embed" version of the controller works in some browsers, while the "object" (with its companion "param" tags) works in those browsers that don't support "embed". You will only have one controller -- this doubled code just maximizes the effectiveness of this controller in various browsers.

Okay, you have added an audio controller to your web page. You can even add multiple controllers in this format to the same page. Or consider making a small blank page with the controller in it (and maybe some text describing what is being listened to). Then open this small page in its own window using the "Open Browser Window" behavior. By having the audio player in its own window, it can keep playing even when the user goes to a different page within your site.

One final warning. Be conservative. Don't "autoplay" or "loop" a track that someone may find annoying or get sick of pretty quickly. And especially be careful of any use of adding music without the controller for the same reason....

 

Return to Resources page.