Back to Main Page

E-Mail Me! Click Here!

Adding Background Music

Background music is, undeniably, one of the coolest aspects of HTML. The music adds a whole new dimension to the page; that of sound. The first step is to find the right sound file. Test it all the way through to make sure it has no glitches before you put it on your page. The HTML for adding music looks like this:

Acceptable file types are .mid, .wav, and .au (others can be used with plug-ins). Note that this is actually three separate sets of tags. The <embed> commands in the first line are one set; and the <bgsound> commands in the second are another, and the <noembed> & </noembed> in the third line are the last.

Netscape supports <embed> tags.

Intenet Explorer supports <bgsound> tags.

So by utilizing both sets of commands, you can rest assured that users of both browsers will hear your sound file.

The graphic used to control the music will vary in size depending on what browser your guest is using, and/or what plug-ins they have (crecendo, etc.) The sizing I use is "height=145 width=145". This is the dimensions of the largest music control I have encountered to date (MSN-IE 5). Remember that if you do not specify a size, the browser will take up as much space as it needs, which can make your page look cluttered, and can even move things around inside tables and the like. In almost every case, the actual important controls (Play, Stop, FF, etc.) will be at the bottom of the image, so cropping the height is okay, just don't over do it.

Attributes of the <embed> Tag

The three options in the top row (hidden, autostart, and loop) can be set to false if you wish. Hidden=false shows the controls for the music on the browser screen. If you make autostart false, the music will not start until it is told to do so. The only way to do this is to make "hidden" false also. If loop=false, the music will play through once and then quit. Music that plays continuously with no way to stop it can get annoying, so I would reccomend that if you use loop=true, you also make "hidden" false. There is also a fourth attribute that can be added to this tag; this is "volume=". The use of this attribute should be obvious. The value is expressed in terms of percent of maximum.

The controls that are revealed when hidden=false are a graphic image and can be centered or otherwise aligned just like any other graphic image. Likewise, they can be cropped (height and width), given vspace and hspace, or made into a link; however this last option would render the controls useless for their intended purpose. Information detailing these attributes can be found in the sections about graphics.

Attributes of the <bgsound> Tag

This statement usually encloses an image that has the same dimensions as the controls for the music. The image will then be displayed if (and only if) the music cannot be played for some reason. If you don't want to have such a backup, then the tags may be deleted. This same tag applies to using video clips; see below for more on this subject.

Adding Video Clips to Your Page

This is an even greater idea than background sound, but you must be careful; video clips have a nasty habit of taking a VERY long time to load. Interstingly enough, you likely already know the tag you need to use. For Internet Explorer, the HTML to add video is as follows:

Of course you must set the filepath to find your video clip.
Here are a few additional attributes that you can add:

• align= - Aligns text around a video clip; center-line, left, or right.
• loop= - Values can be "infinite", or any integer.
• border= - Specifies a border for the clip. The default is 1.
• src= - You may add a link to an image that can be displayed if the video cannot.
• start= - Acceptable values are fileopen or mouseover; these should explain themselves.
• controls - No value, but removes the control bar that normally accompanies the clip.

For Netscape, the <embed> tag finds a new use. The Netscape variant of the video HTML looks like this:

Additional attributes for this version are as follows:

• border= - Specifies a border for the clip. The default is 1.
• align= - Aligns text around a video clip; center-line, left, or right.
• autostart= - Same as the music attribute, values are true or false.