Including Sound in a Web Page

Inserting an audio or MIDI file into a Web page is a piece of cake. Just link to it. For example:

<A HREF= "bark.wav">

Usually, when you click on such a link, the browser's internal little audio appsky will pop up and play the sound. Explorer supports .wav, .au, .aiff and .mid files, while Netscape supports .wav and .mid. Try it by clicking on these links:

Dog Bark in .wav Format

Dog Bark in .au Format

Much more control over playback is offered by the EMBED tag. EMBED takes various attributes that allow you to control the appearance of the onscreen player, or hide it altogether. You can also set the sound to play automatically when the page is loaded. For example:

<EMBED SRC="BARK.WAV" HEIGHT="40" WIDTH="200">

will cause a 40x200 player to appear at the desired point in the page, which will play a wave file called "bark."

<EMBED SRC="BARK.WAV" HIDDEN="TRUE" AUTOSTART="TRUE">

will cause the file to play when the page loads, and no onscreen console will appear. Another way to do the same thing, but which only works in Explorer, is to use a BGSOUND tag right after the BODY tag, for example:

<bgsound src="bark.wav" loop=5>

Dog Bark in Wave Format

Dog Bark in .au Format

The EMBED tag can take various other attributes, including SMALLCONSOLE (displays a smaller console), LOOP (allows you to specify a number of repeats for the sound), STARTTIME and ENDTIME (the last two allow you to start or end playback at a specified time within the audio file). It's a bit of a crapshoot whether any of these attributes will be supported by any particular browser version, so use them with care, if at all.

Audio can be handled by most of the popular Web scripting languages, including Java, Visual Basic, Javascript and others. It's easy to make a link play a sound in response to mouse movements. First, embed your sound file in the page using a tag like this:

<EMBED SRC="bark.wav" HIDDEN=TRUE AUTOSTART="false" MASTERSOUND NAME="soundfile">

The MASTERSOUND attribute is used when you want to be able to control the same sound file from any of several different triggers on the page, in this case three different mouse events. The NAME attribute allows this file to be called by Javascript.

Now that the sound file is there, ready for Javascript to call it by name, simply include a "javascript:document" statement in your anchor tag, as follows:

<A HREF="#"
 onClick="javascript:document.soundfile.play()"
 onMouseOver="javascript:document.soundfile.play()"
 onMouseOut="javascript:document.soundfile.play()">
Text or Image
</A>

Of course, you could also set the onClick, onMouseOver and onMouseOut events to different sounds. Just give each a different NAME with an EMBED tag. Test 'er out by mousing the animal below. This only works in recent versions of Netscape, and Explorer 5.

Now that we've established that we can include sound in a Web page, let's ask whether we should. Some sites will find links to sound clips here and there to be valuable and entertaining, and some mouseover sounds certainly make a page feel more interactive. Unfortunately, much of the cool scripting and such only works in the very latest browsers.

Does your Web site need a "background track?" Probably not. Music is dynamic and sequential, and it complements other dynamic, sequential media. If a Web site were like a film or TV spot, then it would cry out for a soundtrack. But most Web sites (at the moment) are a lot more like magazine articles than anything else, and a magazine doesn't need a soundtrack. Unless sound is an integral part of the information you're trying to publish on your site, many designers will find that there's no logical way to tie music into the Web page content. A soundtrack is often more of an irrelevant distraction than a complement to a site.

Streaming Audio
Audio for the Worldwide Web
The Next Wave