Website Music - Anchor, Bgsound and Embed Tags

In the first part of this tutorial we discussed the different types of audio files used most often on webpages. In this part of the tutorial we will discuss methods of adding music to your HTML webpages. So let's take a look at how to code the HTML. You can use the HTML anchor tag method or the bgsound and embed tags method.

The first method is to use the HTML anchor tag (link). This is a user-friendly method because it offers the web visitor a choice to view your webpage with or without music. The visitor can view your webpage faster because he does not need to wait for the audio file to download with the webpage itself. The audio file is only downloaded if he chooses to hear the song and clicks on the link which will open the web browser's audio player as a pop-up window. Let's say you want to put a midi file on your webpage and the name of the midi audio file is "song.mid". Also you want to use the anchor tag method. The code for the link would look like the code below. The href attribute tells the browser where to look for the audio file. The value of the href attribute will be the url address of the audio file. You can use the complete url as in the example below or you can remove the "www.yourwebsite.com/" if the audio file is in the same place as the webpage. (Click here for a review of the HTML anchor tag.)

Note--The arrow

indicates that the code is wrapped to a second line and should really be all on one line.

The second method will make the audio file play automatically when the webpage displays. You will use the bgsound tag and/or the embed tag for this method. Here is the code.

Note--The arrow

indicates that the code is wrapped to a second line and should really be all on one line.

src	source attribute - value is the url address of audio file
autostart	true or false (embed tag)
loop	true, false, or number of times the song is to be played (embed tag) infinite or number of times the song is to be played (bgsound tag)
width and height	measurements of audio control panel on webpage (embed tag)
hidden	true or false - controls the visibility of the control panel (embed tag)

The embed and bgsound elements have several attributes that control the way the song is played and how the audio control panel is displayed on the webpage.

The src attribute works the same way as it does in most other HTML tags. It tells the browser where to find the audio file.
The autostart can be turned on or off by setting the value of this attribute to true or false. When turned on, autostart will cause the music to play as soon as the file has been downloaded. (embed tag)
The loop attribute tells the browser how many times to play the file.

If you want to use the embed tag, it is a nice effect to hide the control panel of the audio player. You can do this by setting the value of the hidden attribute to true. On the other hand, you can control the appearance of the control panel on the webpage with the height and width attributes. If the height, width and hidden attributes are not specified, then the control panel will appear on the webpage by default. Although the hidden feature is nice, you might want to leave the control panel visible so the listener can have control over the audio playback (such as the volume).

Most browsers can "read" the embed tag. However some browsers, especially the older ones, cannot. This is why you use the noembed tag. This tag tells the browser to follow the instructions between the opening <noembed> tag and the closing </noembed> tags only if the browser cannot read the embed tag itself. The bgsound tag works in the same way as the embed tag does. However, the bgsound tag does not have the height, width or hidden attributes.

	Editor Wanted BellaOnline's HTML Editor