Add Music to Websites Using HTML Code: Music for Websites

Create Background Music for Your Website with These Tips

Add music to website

With the influx of websites that allow an individual user to sign up for his very own chunk of webspace, the demand for information on how to add zest to one's webpage is growing larger. 

Many webspace providers (such as Livejournal and Myspace) allow the everyday user to make minor (or more drastic) adjustments to her personal webpage. Learning about adding music for websites isn't that difficult, actually. This tutorial will explain the steps that must be taken, using HTML: 

  1. Think about the ramifications of adding music to your website. While you may think it's a cute idea to have your favorite song playing in the background of your webpage, there is a plethora of reasons why web surfers may disagree. Using music for websites isn't always a great idea. People who are listening to their own music will be annoyed and have to pause their own musical selection while they figure out how to disable your background music. Others might not have quick access to the volume control on their computer and send a blaring rendition of whatever you've chosen through their homes, headphones or office. Please be polite to these users by choosing your music carefully and warning users that music will play before they open your webpage. Take these situation into consideration before you add music to websites.
  2. Evaluate your choice of sound format. While high-speed Internet connections are becoming more popular in the home, not everyone has or wants to graduate from a 56k connection. If you are tailoring your musical selection to the general public, it would be wise to choose music in a MIDI format (.mid) or convert your music into that format. Higher quality sound files take longer to load, and the 56k users may have to listen to your selection skip over and over as it makes a futile attempt to load faster than it will play. However, if you decide that you want your music to be in a higher quality format (.mp3, for instance), the decision is ultimately up to you.
  3. Find a place to upload your sound file. In order to display any media on your website, you're going to need a place to host it. If you have purchased your own webspace (or signed up for it for free on many websites), than you can use an FTP client (or the website of your provider) to upload your music there. However, if you do not have webspace that allows such files, you may have to search around on the Internet for a website that will host your media for you. If you're going to receive a lot of traffic, it's probably a good idea to buy webspace so that you do not max out your bandwidth. If you only plan to have a handful of visitors every week, then a free host should be fine.
  4. Choose the way you want music to be played on your website. If you have followed Step 1 and decided that you don't want to bother web surfers with embedded music, there is still another option open to you. You can create a link on your website that plays music, giving users the option of clicking to hear it. To provide background music this way, you can paste the following code anywhere in the body of your website:

    <a href="music.mid">Play music</a>

    Simply replace "music.mid" with the address of your sound file (you should know the URL after you've found a place to upload it) and replace "Play music" with any text you'd like. When someone clicks on this text, your music will play.
    If you desire to have your music play as soon as your website loads up, then you should paste the following code (which I will dissect in a moment) in the body of your webpage:

    <embed src="music.mid" autostart="true" loop="true"
    width="2" height="0">

    <bgsound src="music.mid" loop="infinite">

    This code should run on most major browsers (IE, Mozilla, Netscape, and Opera at least). Replace "music.mid" with the address of your music file in both places and your sound file will be embedded. The reason that you must paste the address of your music file in two different places is that there are actually two different tags being placed on your website. The first is compatible with Netscape and Mozilla, and the second is compatible with Opera and IE. There is a danger that certain browsers will try to load your sound file twice due to the two different pieces of code; this problem is solved by placing the second chunk in noembed tags, as you see in the above code. By placing both of them on your website in this way, most browsers will play the music that you embed.

    On a last note, browsers run your embedded sound file through media playing equipment on the users' computers. If a user has a computer unequipped with the media player that is compatible with their browser, they will not be able to hear the music you've put on your website. This and several other factors (impeding plug-ins, a background music "off" option) might keep some visitors to your website from hearing your music, but all these factors are beyond your control. Just know that those who make an effort to hear your music will enjoy it.


Share this article!

Follow us!

Find more helpful articles: