I want to create noisy websites. All of our desktop applications make sounds. It seems completely unfair that our websites are so quiet.
- <bgsound> tag
- <embed> tag
- <object> tag
1. <bgsound> tag
Here’s how you add sound with the <bgsound> tag:
<bgsound src=”test.wav” />
The <bgsound> tag is the tag that gave sound a bad name. This is the tag that everyone adds to their websites to create the endlessly looping background music. The <bgsound> tag was introduced into the world (in the same month) with the release of Microsoft Internet Explorer 2.0 and Mosaic 2.1. Opera supports the <bgsound> tag, but Firefox does not.
Since the <bgsound> was never incorporated into any web standards (you won’t find any mention of the tag in either the HTML or XHTML standards), most web authors avoid this tag as outdated and dead. Typically, you are encouraged not to use the <bgsound> tag in favor of either the <embed> or <object> tag.
The Internet Explorer version of this tag has four important properties:
• Balance — Enables you to specify the balance between the left and right speaker
• Loop — Enables you to specify the number of times that the sound will repeat. The value -1 means loop infinitely
• Src — Enables you to specify the URL to the sound file
• Volume — Enables you to specify the volume of the sound (valid values range from -10,000 to 0)
2. <embed> tag
Here’s how you use the <embed> tag:
<embed src=”test.wav” type=”audio/x-wav” />
The src attribute points to the sound file and the type attribute specifies the MIME type of the file. Notice that the MIME type of a .wav sound file is indicated with the MIME type audio/x-wav. The x means that .wav is a custom type. Using the x is necessary because the .wav sound file format does not have a registered MIME type at IANA.
The <embed> tag is not limited to sounds. You can use the <embed> tag to embed a variety of different types of objects in a page including videos and pictures.
There’s no master list of valid attributes for the <embed> tag. Different types of objects that you embed in a document will support different attributes. For example, on my computer, Windows Media Player is mapped to the .wav extension. Therefore, I can use Windows Media Player attributes with the <embed> tag.
One problem with using the <embed> tag is that you must have an application mapped to the type of file being downloaded. Unfortunately, on my computer, there was no application mapped to the .wav extension by default. When I initially requested a page that contained an embedded .wav file, I got the Internet Explorer information bar.
3. <object> tag
The <object> tag is very similar to the <embed> tag. It allows you to embed objects in a page like this:
<object data=”test.wav” type=”audio/x-wav” />
Notice that the <object> tag uses the data attribute and not the src attribute to point to a file.
The difference between the <embed> tag and the <object> tag is that the latter tag is supported by W3C web standards. If creating standards compliant websites is important to you, then you should use this tag.
Just like in the case of the <embed> tag, there is no master list of attributes for the <object> tag. The list of valid attributes all depends on the application or plug-in being used to display the embedded object.
window.addEventListener(“load”, setupPlaySound, false);
if (navigator.appName == “Microsoft Internet Explorer”)
var snd = document.createElement(“bgsound”);
playSound = function(url)
snd.src = url;
playSound = function(url)
var obj = document.createElement(“object”);
obj.type = “audio/x-wav”;
obj.data = url;
var body = document.getElementsByTagName(“body”);
And, adding the following link to a page will cause the sound file ClickHere.wav to play whenever you hover your mouse over the link.
<a href=”SomePage.htm” onmouseover=”playSound(‘ClickHere.wav’)”>Click Here!</a>
The playSound() method works with recent versions of Internet Explorer, Firefox, and Opera.