Adding a Background Sound to Your Web Page

Last Updated: October 9, 1999

Introduction

Sound can add fun and interest to an otherwise static web page. While your user visits your web page an appropriate tune that complements your web page's theme can play in the background. If you prefer, a sound "bite" can play each time your web page loads. For example, if you sold doors, a "ka-chunk" door sound could play each time your web page loads.

Types of Background Sound Files

Because you cannot be sure what sound utility your user has installed on his or her computer, you should limit your sound files to two popular types: WAVE (.wav) and MIDI (.mid) files. A .wav file is actually digitially recorded sound. The files are BIG, REALLY BIG. For example, a one minute .wav file, recorded in CD quality stereo, can easily exceed 1 megabyte in size. Files of that size are not useful as background sounds because it would take several minutes for your user to download the file. A very short (a few seconds or less) "sound effect" .wav file, however, like a telephone ringing or a cat meowing, can be fairly small and useful as background sound.

The other kind of sound file you can use in your web page is a MIDI file. A .mid file is actually "synthesized" sound, not recorded sound. You can think of a .mid file as a player piano roll and the sound card in your user's computer as a player piano. The .mid file tells the synthesizer (organ) chip on your user's sound card to play a tune. The .mid file does not contain the sound, it contains the "score," that is, the muscial notation of the tune the sound card will play. Because of this, MIDI files can be much smaller than WAVE files. For example, the .mid version of Aaron Copland's "Appalachian Spring" that you will find in the list of .mid files later in this tutorial plays for 24 minutes but is only a relatively small 115K in size.

Three Ways to Add a Background Sound to Your Web Page

There are three easy ways to add a background sound to your web page. You can use the <BGSOUND> tag, the <EMBED> tag, or the <META> tag. There are advantages and disadvantages to each technique. We will examine each technique, starting with <BGSOUND>.

<BGSOUND>

Using the <BGSOUND> tag to add a background sound to your web page is not recommended because the <BGSOUND> tag is supported only in MS Internet Explorer. Other browsers, including Netscape, ignore the <BGSOUND> tag. When you use this tag, the sound player controls are hidden from the user. As a result, you have to be extra careful not to annoy your user with the sound that plays because they cannot turn it off.

To add a background sound to your web page using the <BGSOUND> tag, add a line like this one to your web page:

<BGSOUND SRC="kirkhere.wav">

It doesn't matter where the <BGSOUND> tag appears in your code as long as it appears bewteen <HTML> and </HTML>. I like to put it consistently below my opening <BODY> tag, just so I know where it is.

The SRC attribute is the only required attribute for this tag. The value of the SRC attribute is the name of the sound file you wish to play when the web page loads. In this example we used a very short WAV file (only a second or so) as the background sound.

You can also add the LOOP attribute to the <BGSOUND> tag. The LOOP attribute tells the browser how many times you want the the sound to repeat. If you added LOOP="10" to the <BGSOUND> tag, the sound would play 10 times and then stop. Playing a sound over and over again can get kind of annoying, depending on the sound, so use LOOP only when appropriate. If you do not use the LOOP attribute at all, the sound will play once and then stop. Here is the same <BGSOUND> tag with the LOOP attribute added:

<BGSOUND SRC="kirkhere.wav" LOOP="3">

<EMBED>

The <EMBED> tag is designed to allow you to embed various kinds of media files in your web page, including video files. For this tutorial, we will stick to the background sound aspect of the <EMBED> tag. The <EMBED> tag has the advantage of working correctly in many browsers, including Netscape and MS Internet Explorer.

To add a background sound to your web page using <EMBED>, add a line like this one to your web page, like so:

<EMBED SRC="esbfinal.mid" AUTOSTART="TRUE" HIDDEN="FALSE">

It doesn't matter where the <EMBED> tag appears in your code as long as it appears bewteen <HTML> and </HTML>. I like to put it consistently below my opening <BODY> tag, just so I know where it is.

This HTML code will make the midi file "esbfinal.mid" a background sound on your web page. The <EMBED> tag should work if your user's browser is Netscape version 3.0 or higher, Internet Explorer version 3.0 or higher, or any other web browser that supports the <EMBED> tag.

The following HTML code will make the Beatles' song, "Rain," a background sound for your web page. A working version of the background sound is also provided below. Click on the control panel's play button to play the midi file.

<EMBED SRC="rain.mid" AUTOSTART="FALSE" HIDDEN="FALSE">

The SRC attribute simply tells the browser the name of the midi file to play. Put the MIDI file in the same directory as your web page.

The AUTOSTART attribute tells the browser whether or not the file should start playing as soon as the page loads.

The HIDDEN attribute tells the browser whether or not the controls for the sound player should be hidden from the user.

Be careful when using the AUTOSTART and HIDDEN attributes together. If AUTOSTART is set to "TRUE" and HIDDEN is also set to "TRUE", then you have a sound that plays automatically each time the user visits the site that the user can't turn it off! Using such a combination for quick one or two second sound bites is probably OK. On the other hand, you should never set HIDDEN to "TRUE" when a tune of more than a few seconds will play. If the user doesn't like the tune, this is the fastest way to drive the user away from your site. Whenever a tune automatically plays as soon as the page loads, always give the user a way to turn it off.

<META http-equiv="REFRESH">

You can also use the META tag with the http-equiv="REFRESH" attribute to add a background sound to your web page. The <META> tag is a special tag that is used to send "http" commands and other information to a web server. For our purposes, the <META> tag will tell the web server to provide a particular sound file to the user's browser. The sound file will play on the user's default sound utility and will be loaded into its own window. This is convenient for the user and the web page author. For the web page author, the technique is easy to implement and works with a wide variety of browsers. For the user, the sound player controls appear in a separate window. It is easy for the user to find and turn off the sound if he or she so desires. To turn off the sound, all the user has to do is close the window containing the sound player.

The <META> tag always goes between the <HEAD> and </HEAD> tags.

Add a line like the one below to your web page to add a backgound sound using the <META> tag:

<meta http-equiv="REFRESH" content="0;URL='./gilligan.mid?autostart=true'">

In this line of code, the three critical items are the number "0," the filename "gilligan.mid," and the attribute, "autostart=true."

The "0" tells the browser how many seconds to wait before it plays the file with the sound player utility. In this case, the browser waits zero seconds (the sound file should play as soon as it downloads).

The filename, "gilligan.mid," specifies the sound file to play.

The attribute, "autostart=true," specifies whether the file should start playing automatically after it loads. If autostart is set to "false," then the file will load into the sound player utility but the user will have to click on the "play" button of the sound player utility in order to start the playing of the sound file.

Links to Sound Files

Here are links to esbfinal.mid, rain.mid, and several other midi files in my collection:

 albinoni.mid     20k
 aspring.mid     115k
 bart_bag.mid      4k
 empire2.mid      34k
 esbfinal.mid     47k
 ewok.mid         14k
 ewok_2.mid       28k
 gilligan.mid     16k
 hanleiag.mid     40k
 moz_k191.mid    122k
 nut6reed.mid      9k
 rain.mid         21k
 nowhere.mid      18k
 flyeagle.mid     77k
 everybre.mid     47k
 adamsfam.mid      3k

Here are links to some of the .wav files in my collection:

kirkhere.wav 15k

camera.wav 5k

car.wav 14k

phaser.wav 1k

type.wav 9k

whoosh1.wav 2k

brock.wav 81k

phaser-tos.wav 13k

phaser-boom.wav 25k

photon-torpedo.wav 12k

stbackground.wav 31k

You may have to right click the MIDI and WAVE files to download them. Also, generally you can also right click the sound player controls in your browser if you wish to download a sound file that is currently playing on your system.

For More Information

Want to learn more about adding sound files to your web page? Read Web Diner's Add Sound to Your Web Site tutorial. This web site include links to on-line sound file collections.