Adding Sound to a Web Page

There are several ways to add sound to a web page. This tutorial shows you the two easiest and most common methods. These methods should work with most common audio file types (mp3, wav, au, etc).

Before you proceed, a word of caution: Background music is one of the most unpopular website "features". Many people will hit their back button as soon as they realise your page has background music, for reasons including the following:

People visit websites at times and places where music is not appropriate (e.g. work, late at night, etc).
Many people find music too distracting.
Many people don't want to waste bandwidth on background music.
Visitors may already be listening to other music or watching TV.
Some people see background music as a sign of an amateur website.

If you must put background music on your web page, at least give visitors the option to turn it off. (Note: Although background music can usually be stopped by hitting the Escape button, most people don't know this).

Method 1: Hyperlink

The easiest way to add music is to use a simple hyperlink which points to the sound file. This will open the user's default sound player and play the sound.

This method requires that the user click the hyperlink — it will not start the music automatically. On the plus side, the user is in control and will appreciate the choice of whether to play the music.

Add the following code to your page, substituting the file name for your own:

<a href="mysound.wav">Play background music</a>

The link works like this: Play background music

Method 2: Embed

The embedding method places a media player in your page (which may or may not be visible to the user). Use the following code:

The embedded player looks like this:

If you would prefer not to show the player (and give the user no control), use this code:

Notes:

Set the loop attribute to either "true" (repeats forever), false (plays once) or the number of times you want the file to repeat.
The "autostart" attribute can be set to "true" (starts playing immediately) or "false" (waits for the user to press play).