JCL's Tutorial On Background Music And Sounds

Please Note : If you do not hear music, you are not using Internet Explorer and you do not have a proper plug in to play this X-Files MIDI (Musical Instrument Digital Interface). Please click here to download Netscape 3.0 or higher (Netscape 3.0 or higher has LiveAudio which allows you to hear MIDIS.

Introduction

Background music and sounds have become very big. Many people have them on their page, and many want to learn how to make them (like you) so here is a fairly brief tutorial on what they are and how to make them.

The <Bgsound> Tag (Internet Explorer Only)

The <bgsound> tag is used to play a MIDI (Musical Instrument Digital Interface), a .wav, an .au, or some other sound or music file. Below is the bgsound tag I used to make the X-Files MIDI play in the background (Please note that this was not the command that created the clickable music box):
<bgsound src = "http://www.webspan.net/~herbs/xfiles.mid" loop = "true">
The bgsound part tells IE browsers to play the src part of the tag as music or a sound. The src = "http://www.webspan.net/~herbs/xfiles.mid" part tells the computer to play the music or sound located at http://www.webspan.net/~herbs/xfiles.mid. To make it play the music/sound file that you want, just change the address to the file or file's address that you want it to play. Loop = "true" tells to play the sound/music forever. Before playing a sound/music file, the computer looks for the loop part of the tag. If loop = "true", that means that the computer should play the sound/music file again. When it completes the file again, the computer looks at loop again. Since it says true, it plays it again. This cycle goes on and on and on forever so loop = "true" means play the sound/music file forever. You can also use loop = "infinite" to make the file play forever. You can also make loop equal to x where x is a N (a Natural number: 1,2,3,...) number, the computer will play the music/sound file x times. If loop = "false", the computer will only play the song once since loop = "false" means don't loop. If the loop part is not in the bgsound, the computer considers the loop to be false.

The <Embed> & </Embed> Tag

If you have the proper plug in (an extension to your browser which allows it to do something that it normally wouldn't be able to), you should have received a music control panel. Below are the commands I used to receive the music control panel and the background music (Please Note: If you do not see the music control panel, but you are receiving music and have IE, you are probably getting the music from the bgsound tag):
<embed src = "http://www.webspan.net/~herbs/xfiles.mid" autostart = "true" loop = "false" volume = "50%" height = "60" width = "145">
The embed part tells the computer to play the src part of the tag as music or a sound by using an appropriate plug in. The src = "http://www.webspan.net/~herbs/xfiles.mid" part tells the computer to play the music or sound located at http://www.webspan.net/~herbs/xfiles.mid. To make it play the music/sound file that you want, just change the address to the file or file's address that you want it to play. The autostart = "true" means to start playing it when you enter. If it was false, you would have to press the play button to get it to play. Loop = "false" tells the computer to play the song once. The loop works the same way as the <bgsound> loop works. If autostart is false, the music/sound file will play the amount of times loop is equal to when your visitor presses the play button. Volume = "50%" tells the computer to play the file at 50% of it's maximum volume. If volume is left out, the computer plays the file at about 73% of its maximum volume. You can change the 50 to a number from 0 to 100. Height = "60" tells the computer that the music control panel should be 60 pixels high. Width = "145" tells the computer that the music player should be 145 pixels wide. If you do not define the height and width of the music player, the music/sound file will play, but the music control panel will not show up. You can also use align = "left" or align = "right" in the <embed> tag to make it go on the left or right side and have the text wrap around it on the opposite side (if you do not use any tag to make the text go on the next line). To center the music control panel, you have to use the <center> tag before it. The </embed> tag tells the computer that the end of the source for embedding a music/sound file has been reached.

Downloading Embedded MIDIS And Using Them

To download a MIDI and use it on your page without linking to someone else's MIDI address, you must first hold your mouse button down on a place on the music control panel where there are no controls. You should receive a little menu. Then, when the menu pops up, place your mouse cursor on Save As... and let go. Next, save it on your Desktop or one of your folders. After that, save it as Raw Data or Binary in the one of your web page directories. Lastly, link to the MIDI in the <embed> and/or <bgsound> tag on your page, and you're all set.

Jason's HTML & JavaScript Tutorial
E-Mail Me