Wood County Free-Net's Official

HTML Help Page


Lesson Ten - Adding Music


So.....you want to add some music to your site for your visitors to enjoy? First things first, your music should be either turned off (let your visitor turn it on), or the icon for the music should be on the top of the page so the visitor does not have to look for it to turn it off. A lot of people do not enjoy music on the net and you can lose visitors by having music blare at them. Others are at work, school or a public library and the music would draw attention to them if it came on when they visited your site. I would also recommend adding the title of the song to your page, so people are not guessing at what is playing.

The tag for adding music to your page is <EMBED>. This tag works a lot like our IMG tag. We will be adding items to it, but they will be for the music file. The actual name of the music file will go between the quotes below. We will fill that in a little later.

Your code will start like this: <EMBED SRC=" ">

There are several types of music files you can use on the net. One of them are the MIDI (.mid) files. MIDI stands for Musical Instrument Digital Interface. That is the one we will be using here.

The first add on is for the HEIGHT and WIDTH of the music image...so your visitor can play, pause or stop the music. You can change the height and width of the image by just changing the numbers below. Try to keep the image at least at a value to see and use the play, pause and stop buttons. We will try this a couple of ways further down the page.

Your code: <EMBED SRC=" " HEIGHT="45" WIDTH="145">

The second add on is called the AUTOSTART. This tells the browser whether you want the music or sound to play by itself or by letting the viewer start the file themselves after the plug-in box pops up.
"TRUE" starts the file right away, as soon as the page loads.
"FALSE" allows the viewer to choose when to start the music...this is the choice I highly recommend...and is the one I will be using here.

Your code: <EMBED SRC=" " HEIGHT="45" WIDTH="145" AUTOSTART="FALSE">

The last code is the LOOP and controls how many times the music file plays.
"TRUE" loops the sound so that it plays forever, so to speak, the visitor can stop the music with the stop button and when they leave your page the music will stop.
"FALSE" plays the song or sound only one time and then stops. The visitor would have to press the play button to hear it again.

Your code: <EMBED SRC=" " HEIGHT="45" WIDTH="145" AUTOSTART="FALSE" LOOP="TRUE">

Ok...the fun part. Let's get a music file. Choose one of the files below and right click on it. Then choose Save As and save the file in a folder on your hard drive (let's name the folder Music). Remember to upload the music file to your server or it will not work on your page. Do not link to the music file off this web page or any other web page.


LEFT click on file to Hear the music
Name of SongFile name
Candle in the Windcandlewn.mid
Titanictitanic.mid
Angels Amoung Usangels.mid
Desperadodesperado.mid
God Loves the USAgodusa.mid
Fly Like an Eagleflylikeaneagle.mid
Stairway to Heavenstairway.mid
Merry Little Christmasamerry.mid
The Most Wonderful Time of the Yearthemost.mid
Jingle Bell Rockjbelrock.mid


I am going to choose the file angels.mid and add it to our code...here is what it will look like:

<EMBED SRC="angels.mid" HEIGHT="45" WIDTH="145" AUTOSTART="FALSE" LOOP="TRUE">

Here is what will come up on your page....

Okay...let's play with the HEIGHT and WIDTH numbers a bit. Let's Use HEIGHT of 45 and change the WIDTH to 75...here is what we will get...see how the image changes and is now just the three main buttons we will need? Neat huh?
BTW (by the way) I changed the music on this one. See how I added the name of the music file below the music icon? All you need to do is insert a break <BR> and key in the name of the song. Use quotes or italics for the name of the song.


"God Loves the USA"

Want to get rid of the top scroll bar? Let's try a height of 25.


"Stairway to Heaven"

For more music or sound files check out the Links page included with these lessons.

NOTE: These tags are for the regular windows midi player. If you should happen to install another player off the internet the graphic used will change, so will the above sizes.

Choose one of these music files (or find one of your own) and add it to your page adding height and width dimensions and choose true or false for the autostart and loop commands.


Line


Please use the email link below if you have any questions about your lesson.


Back to HTML Help Index Page     Question Form


Created and Updated by Kathy Brandt ~ 1/27/04