How to play music in background


I want to create noisy websites. All of our desktop applications make sounds. It seems completely unfair that our websites are so quiet.


Methods are:

  1. <bgsound> tag
  2. <embed> tag
  3. <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.

However, I use the <bgsound> sound tag in the Javascript that I develop at the end of this post. There is one very important advantage of the <bgsound> tag. The <bgsound> tag does not cause the information bar to popup in Internet Explorer when you use this tag in a page.

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.

Since I don’t want to inflict the Internet Explorer information bar on users when playing sounds, I don’t use the <embed> tag in the Javascript at the end of this article. The <bgsound> element enables us to play .wav files without displaying the 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.

Unfortunately, when used with Internet Explorer, the <object> tag causes the Internet Explorer information bar to popup just like the <embed> tag. In the Javascript at the end of this article, I use the <bgsound> tag for Internet Explorer and the <object> tag for every other browser.

Generating Sounds with Javascript

PlaySound.js

if (window.attachEvent)
window.attachEvent(“onload”, setupPlaySound);
else
window.addEventListener(“load”, setupPlaySound, false);

function setupPlaySound()
{
if (navigator.appName == “Microsoft Internet Explorer”)
{
var snd = document.createElement(“bgsound”);
document.getElementsByTagName(“body”)[0].appendChild(snd);

playSound = function(url)
{

snd.src = url;
}
}
else
{
playSound = function(url)
{
var obj = document.createElement(“object”);
obj.width=”0px”;
obj.height=”0px”;
obj.type = “audio/x-wav”;
obj.data = url;

var body = document.getElementsByTagName(“body”)[0];
body.appendChild(obj);
}
}
}

The first lines of the Javascript create an event handler for the browser window load event. Internet Explorer uses the attachEvent() method to create an event handler and other browsers use the addEventListener() method.

The setupPlaySounds() method is called after the window is loaded. This method creates the playSound() method. Javascript enables you to conditionally create different versions of a function. There is one version of the playSound() method that is created in the case of Internet Explorer and another version that is created in the case of every other browser.

The Internet Explorer version of the playSound() method takes advantage of the <bgsound> tag to play a sound. The alternative playSound() method takes advantage of the <object> tag. If you link the Javascript file above into an ASP.NET page, then you can play a sound by calling the playSound() method and passing the URL of a sound file. You can link the PlaySound.js file to an ASP.NET page by adding the following tag to the page:

<script type=”text/javascript” src=”PlaySound.js”></script>
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.

Advertisements

11 thoughts on “How to play music in background

  1. Hey its not working, I am using asp.net 2005 and the
    is not working, i followed all the instructions, and i am using IE7 and Google Chrome , latest firefox .

    Please guide to playsound on mouse hover.

    • Thanks ,
      Here in WordPress.com blog , no such facility to join blog available like blogspot has.
      You can stay connected/Updated to my blog by using Rss Feed.

      Thanks & Regards
      Ramani Sandeep

  2. Thank you, thank you – worked first time and easy to implement. Gone through numerous other sites and found code but wasn’t happy with it!

    Great work!

    Just

    • Hi Nirmal, Does it gives any error or not? As this code i have tested on FF, Crome and IE as well when i have posted this post. Don’t know why it is giving problem to you.

      Regards,
      Sandeep Ramani

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s