HTML Cookbook Basic HTML Course

Alternate version

Background Music

There are two methods of playing background music for web pages. Neither one of them validate for XHTML. Isn't that the way it goes?

We shall show both methods since they work fine for WebTV sigs. Also, there is a JavaScript below that will work for most browsers. I recommend using this script for any pages you build from now on.

Bgsound: <bgsound>

Bgsound is an MSIE proprietary tag. It was originally designed to go in the head section, but it also works in the body. Bgsound starts automatically.

Bgsound does not allow your visitors to turn off the music. Many of them will find this annoying.

Code for bgsound
<bgsound src="URL_of_song" loop="?">

Bgsound attributes

The src attribute is mandatory. Enter the URL of your song.

the loop attribute is optional. Replace the question mark with a number. The song will play that many times. For continous music, use loop="infinite".

Visit The Compendium of HTML Elements for more info on bgsound.

Embed: <embed>

Embed started as a proprietary Netscape tag, but MSIE has added support, so embed.

Code for embed
<embed src="URL_of_song" loop="?" autostart="true" hidden="true">

The embed tag adds a button or control panel that your viewer clicks to start the music. It looks like this:

WebTV users can use their options key to control the music. PC users will see a control panel that they use to control the music.

Embed attributes

The src attribute is mandatory. Enter the URL of your song.

The loop attribute is optional. Replace the question mark with a number. The song will play that many times. For continous music, use loop="true".

The autostart attribute is optional. It makes your music start automatically. MSIE 6.0 starts the song autmatically even without this attribute.

The hidden attribute is optional. Use it to hide the clickable button when you use autostart.

Visit Webreference for a more info on this tag.

Problems with Netscape 7.2 (current version)

• When you use just <embed src="URL_of_song">, PC viewers using Netscape will see a huge graphic that links to a Plug-in page.
• The plugin page has a search function that suggests a player for the music, but there is no link to the plugin site itself, so the viewer has to take their own inititive to find it.
• The plugin still doesn't work even after the user has downloaded the plugin to their PC.
• My opinion: If you want your viewers to click something to hear your music, use the anchor tag instead: <a href="URL_of_song">Text</a>. If you want background music, use bgsound instead.

JavaScript Replacement

This JavaScript code will play background music in XHTML pages. Just copy the code into your page, then replace song.mid with the URL for your song. This code is also available as a text file suitable for transloading or for copy and paste.

Happy coding!
Gnubee

Links

Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup