HTML Code for Adding Music

Using HTML Code for Adding Music Via a Text Editor

If you code your website the long way and use a text editor, such as notepad, then you'll need to know more code than those using HTML editors, such as Dreamweaver. Assuming that you already have a working knowledge of basic HTML code, you will want to take the following steps to easily add music to any page of your website:

1. First, decide if you want the music to play when the web page loads or only when the visitor clicks on a link. Some people are still on dial up and music that automatically loads may slow the visitor's system down or aggravate some visitors. Not everyone will have the same taste in music that you have, so keep all of these factors in mind when making this decision.
2. Upload the music file to your server via a program such as CuteFTP, or through the Control Panel of your site. Most control panels have a feature called File Manager where you can upload files, extract zipped folders and even edit files. It's a good idea to have a specific folder where you keep music files. You can simply title this "music" or "sounds" if you like.
3. Once you've uploaded the music, you are ready to embed the file into your HTML code.

How to Embed Music

There are a couple of different methods you can use to embed the music, depending upon whether you've decided to have the music start on page load or to start only when the visitor clicks on a link.

Music Plays on Page Loading

If you'd like the music or a sound effect to play upon the page loading, then the coding is quite simple for the majority of browsers. There may be a few browsers that will not play the music, but the more common ones, such as Internet Explorer and Mozilla Firefox should work well with this code. Since Internet Explorer will recognize the embed files now, it is probably best to just go ahead and use this type of coding. Here are the steps and HTML code for adding music:

1. Open the page on your website where you want the music to play. Let's say your index.html page, for example. You will either open the page in your HTML editor and go to the coding section or you will download the file and open in notepad or another text editor.
2. Within the page header, add this code:

<embed src="<a href="http://www.yoursite.com/music/yourmusicfile.midi" target="_blank" class="external free" title="http://www.yoursite.com/music/yourmusicfile.midi" rel="nofollow" target="_blank" >http://www.yoursite.com/music/yourmusicfile.midi</a>" autostart="true" loop="false" hidden="true">

1. Replace "yoursite.com" with your website address.
2. Replace "music" with where the file you have uploaded is located. It is probably easiest just to upload the mp3, wav, midi or other type of music format into a folder named "music".
3. Replace "yourmusicfile.midi" with the name and format of your music file. For example, if you uploaded a file named hotrock.mp3 to your website, then you would change "yourmusicfile.midi" to "hotrock.mp3".
4. Save the page and upload or publish. The music should now play when the page loads.

Note: You can set the hidden field to "false" instead of "true", so that the visitor has the option of making the music stop.

Visitor Will Start Song

You can change some of the above code, so that the music does not automatically start on load. The visitor will then have to click to get the music to play in the media player of his or her choice. Here are the steps to embed the code:

1. Follow Step 1 for embedding code where music plays automatically (above).
2. Within the page header, add this code:

<embed src="<a href="http://www.yoursite.com/music/yourmusicfile.midi" target="_blank" class="external free" title="http://www.yoursite.com/music/yourmusicfile.midi" rel="nofollow" target="_blank" >http://www.yoursite.com/music/yourmusicfile.midi</a>" autostart="false" loop="false" hidden="true">

By adding this simple code to your website, you'll enhance the features available to your visitors and add the ability to set a mood.