How to add background music to a website in html

Greetings Of The Day!!!

As I told you in my previous blog I was working on designing of a website for an Ashrama. They wanted a background music to play in the home page of the website. I was wondering how to do it as it has to play without any controls and should start automatically. It’s pretty simple to do it.

Here is the solution to implement a background music play in the website:

HomePage_Intro.mp3 is the file which is going to play in the back ground. You can replace it with your file name and also note that this should be available on the server. If it’s not there on the directory where the index file is there, you can give the full path of the music file. 

  

This works for most of the internet browsers except opera and older IE versions. For those we can use bgsound tag of HTML as below:

But the newer version of IE recognizes both the tags, hence if you add both to the code it leads to the problem of playing the music twice so to overcome this problem we have a workaround of keeping the bgsound tag inside noembed tag. So that browser does not interpret the second tag. Here is the code:

This code appears to be compatible with all versions of IE, Netscape and Opera.

Here in the above examples, I have hidden the music controls. But if you want to see the music controls, you can remove the Hidden tag and also you can give the width and height for the player as below:

We should be aware that background music that automatically starts playing when a web page is loaded may not be appreciated by a large number of the visitors. Some of them, when greeted with the sudden blaring of music from their speakers, may immediately hit the BACK button of their browsers. This may occur even if you're playing a piece of music that you think is well loved by everyone.

You need to remember that, there are people who browse the Internet in public libraries, surfing centres, at work, or in the dead of the night when others are asleep. Others may already have their favourite music playing on their computer speakers, and your auto-playing music file will only cause them to be annoyed. So it’s always better to give the controls for the players. 

Even if you are satisfied that your website has the type of target audience that will enjoy your background music, there are alternatives to automatically playing music that you might want to consider.  For example, giving visitors a link which they can click to play music would allow you to showcase your music while remaining sensitive to your visitors' preferences. Below is the code on how to accomplish this:

After clicking on the “Play music” link, the music can start playing in the background or even you can give the controls for the player to control the music.

That’s it. Hope this is helpful.