Have you ever opened a Web page that plays music? Personally, I find these incredibly annoying and usually change to another page as quickly as I can ... or turn my speakers down. Don't get me wrong: I love music, and I'm sure I've annoyed a few drivers with the base beat eminating from my SUV, but background music on Web pages is often far too loud.
At home, I usually have my computer speakers turned up for game sounds, so a loud sound blaring at me from a Web page that I haven't even had a chance to read is frustrating. IMHO, it's not terribly professional for most business sites ... unless, of course, your business IS music. Of course, there are no hard and fast rules.
Okay, so now that you know one of my pet peeves, I have to say in fairness that I do think the right music at the right sound level can add a really cool touch to a personal or family Web site. Since I've seen several newsgroup posts and Office Online questions asking how to do this, I thought I would provide a quick tip for adding sound to a Web page.
Adding background sound to a Web pages is as simple as adding an HTML element to a page. Here are the three elements that you can use.
Note To use any of the following code samples, replace "sounds/CARBN_01.MID" with the path and filename of your own sound file.
- Using BGSOUND
The first element, BGSOUND only works in Internet Explorer (although from what I've read, NCSA Mosaic also provides limited support for it). One advantage of the BGSOUND element, IMO, is that the sound controls don't show in the browser. This means that the background music is really in the background and can't be controlled by the user. Okay, so I admit to being a control freak, but I don't like how the controls mess up the look of my page. Anyway, if you want to use the BGSOUND element. Here's the code:
<bgsound src="sounds/CARBN_01.MID" loop="-1">
Use the loop attribute to specify the number of times the sound bite should play. A value of -1 for the loop attribute, as shown in the previous code, makes the sound play until the browser is closed or the user opens another page. If you don't specify a value for the loop attribute, the sound file will play once and then stop.
- Using EMBED
The EMBED element functions similarly to the BGSOUND element. The following code shows some simple code for the EMBED element.
<EMBED SRC="sounds/CARBN_01.MID" AUTOSTART="TRUE" HIDDEN="true">
The loop attribute tells the browser how many times to play the sound file. Setting the hiddent attribute to true tells the browser to play the sound file until the user closes the browser or opens another page. As with the BGSOUND element, if you don't specify a value for the loop attribute, the sound file will play once and then stop.
Setting the hidden attribute to True causes the browser to not display the controls. Alternatively, you can set the height and width attributes to 0, as shown in the following code, to hide the controls.
<EMBED SRC="sounds/CARBN_01.MID" AUTOSTART="TRUE" hidden="true" loop="true">
Although hiding the display of the controls takes a bit of control away from the users, it does give you a great deal more control over how the page displays, and you don't need to work around the display of the controls in your web page. This is a good thing; however, if you absolutely want to display the controls in the browser, you can set the hidden attribute to false, set the height and width attributes, or use the META element, as shown below.
Note In Internet Explorer, both the BGSOUND and the EMBED elements allow the use of the volume attribute. Setting the volume attribute to a value between -10000 and 0 allows you to control the volume of the sound, with -10000 being no sound and 0 being the full sound. IMO, -1000 is the best setting to allow the sound to play without being either too loud or too quiet.
For cross browser functionality, the EMBED element is the best choice for playing a background sound.
- Using META
When you use the META element, the browser displays a sound control bar so the user can adjust the sound, such as volume and play/stop. I like the idea of the controls, but as I mentioned above, they do tend to interfere with the design of the page, unless, of course, you design around them. The following code shows the META element. The "autostart=true" tells the browser to play when the page is opened.
<meta http-equiv="REFRESH" content="0;URL='sounds/CARBN_01.MID?autostart=true'">
Another problem with the META element is that depending on the default media player for the client browser, visitors may get different behavior. For example, I found that if QuickTime was my default player, the browser displayed the sound controls within the page. If Windows Media Player is my default player, the browser displays the sound controls in the Media pane, unless I specified to play media items in their own window, in which case, Windows Media Player opens in a new window, not within the browser. I'm not sure as a designer that I like this lack of control.
Playing music on click is easy. All you do is use an A element, the same as you would with a hyperlink to another page, and provide the path and filename to the sound file as the href attribute. The following code shows how to do this.
<a href="sounds/CARBN_01.MID">Play Music</a>
Then, when the user clicks on the resulting link, the media player opens and plays the sound file, very simple and a much more consistent user experience than the background sound options.
I found several resources while compiling this information, so to give credit where credit is due, check out the following resources for more information about adding sounds to your pages.
Of course, you can probably find many more resources for adding sounds to your Web pages by doing your own Web search.