HTML Coding for Background Music

How Does HTML Coding for Background Music Work?

When you include specific HTML codes into your web page, it prompts the user's browser to launch the plug-in associated with the sound file type that you've programmed the page to launch. For example, if you embed a "midi" file or a "wav" file, the user's browser will attempt to launch the plug-in that is configured on that computer to play that file type. Certain sound files are so common now that using them almost guarantees that your visitors won't have any problem hearing the music. The most common web page sound files include midi, wav and more recently mp3 files.

Browser Compatibility

One of the problems with embedding background music into your web page is that, depending on the browser that visitors are using, the code may or may not work. Netscape and newer versions of Internet Explorer (3.0 and above) make use of the "embed" tag. However, older versions of IE will not recognize that tag. Instead, versions of IE before 3.0, only recognize the "bgsound" tag. Website designers should also consider that there are a number of other browsers, such as Firefox or Opera, where compatibility issues should be considered. The best way to make sure background music will play in all browsers, is to use the "noembed" tag, and include both methods of launching background music. This technique is used in all of the examples below.

Background Music Options

When you want to automatically launch music when visitors come to your website, you have several options to choose from. The first is whether you want the user to have control over whether the music is playing. If so, then you can make the music player visible. Otherwise, you'll launch the music with a "hidden" option. Another option you will need to choose is whether you want the music to play continuously, or only once through. Also, another very useful feature is creating a playlist. All of these options are provided in the code samples below.

Displayed Player, Played Once

The following code will automatically launch background music and will play through the song file only once. It will also embed a player into the page so that the visitor can stop the music if they want to.

Important elements of this code to make not of include the "noembed" tag, which allows you to make the page compatible with all browsers. Secondly, you can modify the size of the player using the "width" and "height" properties so that it fits well within your page.

Displayed Player, Continuous Play

The code below will automatically launch background music and will play through the song file in a continuous loop. It will also embed a player into the page so that the visitor can stop the music if they want to. Keep in mind that many website visitors find continuous background music very annoying, so use this code as tactfully as possible.

Hidden Background Music

One of the most common methods used to play background music on a web page is the hidden technique. Using the code below, the music will launch automatically in the background, and no player will appear on the screen. Keep in mind that this means the visitor will not be able to turn the music off, so it's best to play the file once, and not continuous.

Create a Playlist

A great technique to play not only one song, but a series of songs as background music is to create a playlist. A website playlist is an "m3u" file, which you will need to save on your web directory. An "m3u" file is a text file, set up as follows.

Then, all you need to do is replace the source name from the "midi" file to the "m3u" file, and the website background music will play through your entire playlist.

Notes on Background Music

Even though playing background music is fairly easy, doing it in a way that doesn't appear amateur can be somewhat difficult. It's best to choose music that is soft, or at least starts off soft. This way you won't run the risk of blasting your visitors with music the moment they open your website. Choosing a classy, complimentary background music theme can greatly enhance a website, if it is done in a way that matches the overall theme and style of your website.