How to Add Sound to a Web Page

<bgsound src="sounds/doink.wav" loop="1"> There are a few different ways to add sound to web pages. You can have the sound in the background with no controls, as you probably noticed when you entered this page if you have your speakers on.

You can also have a control panel and let users start the sound file on their own or have the sound start automatically. Another option is to link to the sound file to have the sound file open in an external player. That option also gives users the option to save the sound file to their computer.

How to Play a Hidden Sound

Here's the code I used to have the sound play when this page loaded:

<embed src="sample.wav"
       autostart="true"
       hidden="false"
       loop="false">
<noembed><bgsound src="sample.wav" loop="1"></noembed>
</embed>

Here's what that code means:

The first line identifies the file. Change the sample.wav to the name and format of your sound file. Commonly used formats are .wav, .mp3, and .au sounds.
The second line causes the sound to play automatically. Change true to false if you don't want it to start automatically, but if you're not including the control panel that would be silly.
The third line hides the control panel. Change false to true to allow the control panel to be visible. If you show the control panel you might also want to include width="x" and height="x" tags to control the size.

false

true

STRONGLY DISCOURAGE

< The fifth line, shown in brown, is not needed unless you want to your sound to play in older versions of Internet Explorer. If not, just remove the line.
The last line simply closes the tag.

Sound with a Control Panel

Depending on your available software and configuration, most users will see the miniature control panel below. You may have to click the play button twice to hear the sound. I have to anyway. The code for this mini-panel is the same as above except I changed the hidden parameter to true, changed the autostart to false, and added width="70" and height="28" to the code. For the full-sized control panel just leave out the width and height parameters.

You like that . . . song (for lack of a better term)? I made that some time ago while playing around with sound editing software. Yeah, I know, I have my snoopy little nose into a lot of things—but I have fun!

Adding Sound with a Meta Tag

It's not well known, but there's also a way to use the refresh Meta Tag t0 download a sound to the user if they have the software installed to play the file type. This technique opens the sound in the player rather than in the browser. To do that, add the following code to the HEAD section of your web page:

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

Where it has 0 (zero) in the code, that's how long of a delay the browser should wait before opening the sound file. The FileName.mid is the name and extension of the sound file, and be sure to include the path to the file in front of the file name if the sound file isn't kept in the same directory. The autostart can be set to true or false as with an embedded sound.

Sound with a Simple Link

Of course, you can also add sound with a simple link. Depending on how the user's browser is configured, clicking the link will either open the sound file in a player or give the user the option of opening it or saving it. It's also available to download and save on their computer too, via the right-click menu. Code a link to a sound file just as you would a web page link, only place the address to the sound file in the link rather than the address to a web page, like so:

<a href="SomeSound.wav">Here's My Sound</a>

A Few Cautions

Sound files can be very large. If you are using a large file put it at the end of your code so there's less chance it will adversely affect the page's download time.

Bonus Tip: If you come across an embedded sound you don't want to listen to, press the Escape key on your keyboard. Most of the time this will stop the sound from playing, but it won't work if the sound is playing Flash.

I mentioned it before, but you should never loop the sound file. Any sound repeated endlessly becomes annoying, even ones you initially like.
Warning! The embed tag and bgsound are both invalid HTML. The only way to add a background sound to your page that is valid is with the object element—the trouble with using the object element is that it doesn't work in most browsers. It works in Safari, but as far as I know that's the only browser it works in.

The Right Way That Doesn't Work

For future reference, here's how you're supposed to add sound to a web page—but remember, it doesn't work except with Safari:

<object>
<param name="autostart" value="true">
<param name="src" value="YourSound.wav">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src="eureka.wav" controller="true" 
autoplay="true" autostart="True" 
type="audio/wav" />
</object>

And that's the name of that tune! While I don't offer music files here, I do offer some funky weird sound effects.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]