|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.)
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.
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.
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.