Web Design in a Nutshell, 2nd Edition

Adding Audio to a Web Page

There are a number of ways to add audio to a web page. This section covers the most common techniques.

A Simple Link

You can use a simple anchor tag (<a>) to link to an audio file from a web page, as follows:

<A HREF="audio/song.wav">Play the song (3.5 MB)</A>
<A HREF="groovy.mp3"><IMG SRC="buttons/playme.gif"></A>

When the reader clicks on the linked text or graphic, the browser retrieves the audio file from the server and launches a helper application (or plug-in, if the browser is so configured) to play the file. Files accessed in this manner are typically downloaded to the user’s hard drive (stored in cache).

If the browser uses an external player, a new small window from the helper application opens with the controls for playing the audio. If the browser is configured to use a plug-in player (such as the popular QuickTime plug-in), a control panel may load right in the browser window, replacing the original web page. You may want to advise readers to use the Back button to return to the original page should this happen.

It is also good web etiquette to warn readers of the size of an audio file so they can make an informed decision as to whether they want to spend the time downloading the file.

Background Sound

There are several ways (mostly browser-specific) to make an audio file start playing automatically when a web page loads. Note that the disadvantage of using background sounds is that the user has no way of turning the sound off if she does ...