How to Add Background Music to a Website

Home >> Website Additions >> How to Add Background Music to a Website

You can spice up your web pages by adding background music or sound. All you do is upload / save the sound file to your web server and place the HTML code inside the <head> of your page to activate the sound file.

First of all, it is highly recommended that you have your own domain name (AnyName.com) and a music host - in other words, a web host that supports music uploads.

Many free web site providers give you very limited space for your files so once you upload your music, you may find that you're running out of room on your server.

If you need a good host, go to WebsitePalace.com.

Music files can take up a lot of space and Powweb provides the room to accommodate your needs. Again, free web hosts don't generally offer enough space to upload a lot of music so keep that in mind.

Below are the steps to adding the music to your web page...

Steps to Adding the HTML Music Code

Step 1. Find a music or sound file that you'd like to use. Midi (.mid) is a good sound format to use because these files are generally smaller and load quickly.

There plenty of sites on the internet that allow you to download these types of songs for free. Use your favorite search engine to find the perfect song for your site.

You can also use .mp3 or .wav (wave) music, but keep in mind that if you do go this route, it will take the music longer to load because the file size will be larger. Be mindful of those who still have dial up Internet access.

Make sure you have rights to the music file before you use it!

Step 2. Next, upload (save) this music file to your web server either using an FTP program (learn more about FTP here) or your web host's file management control panel.

Step 3. Now open the web page you want the song to load with. You'll have to insert the following HTML code into your site, but first you'll need to edit it.

Modifying The HTML Code

You'll have to modify the above HTML code slightly to fit your website's configuration.

Replace musicfile.wav with the name of the music file you chose to upload to your web server. The code above also assumes you've saved the file in the same location of your homepage (index.html). If you save the file inside a folder on your root then you'd have to change the path slightly.

Let's say you want to load the song on your homepage (page name is index.html). You save the song file to a folder called "music" located off your root/main directory. Then the code you insert in your index.html page would look like something this:

This is telling the browser to look for the song file at...
http://www.yoursite.com/music/musicfile.wav

If you're not comfortable with using relative paths in your code, then you can use the absolute (complete) path to your music file. For example, your code may look something like

Notice the full URL to the music file is listed in the code rather than starting with /music/....

Music File Attributes

After the path to your music file, you'll see a couple of attributes:

The autostart attribute tells the song file how to begin. If you have this set to "true", the song file will begin playing automatically when the page loads. If you put in "false", the sound file will not start automatically and the visitor will have to start the song by using their embedded media player.

The loop attribute tells the song how many times to play. If you have this set to "true" then it will play over and over again automatically. If you have it set to "false" it will play once and stop.

The hidden attribute tells the browser whether or not to hide the media player. It's not a good idea to leave this value at "true" unless you know for sure your visitors don't want to stop the music.

You don't want your music to annoy them to the point they leave because they can't figure out how to turn the music off.

Adjusting the Size of The Media Player

You can customize the look of the embedded/default media player on your visitor's PC by adding a width and height attribute to the code. Be careful as you adjust the size of the player because you can distort it.

Once you have your music file uploaded and coding inserted into your web page, your background music should play when your browser loads. Enjoy!

Want some free HTML software? Download it here!

Want to Add Streaming Audio to Your Site?

Download the Flash Audio Wizard and you'll have streaming audio on your web pages in minutes.

If you liked this, please share. Thanks!