HTML training course - Including sound and music

The simplest method of adding sound/music to your pages is via a text or an image link. The link points to the audio file. When you click on this link, the audio file is downloaded from the server. The browser detects the file type and either launches another program or use a plug-in to play the file.

If an external program is used, a small window opens with the audio file. In case of a plug-in, the file is loaded in the same window (you can change this with the TARGET attribute of <A> tag).

Here I'll use a graphical button as a link to a song from Pink Floyd's The Final Cut. The song is in MIDI file format. If you are working under Windows, Media Player or ActiveMovie Control should be launched (depending how your system has been configured) to play this file.
Note: Internet Explorer may present a pop-up window before launching the external program. It asks you whether you would like to "open" the file or "save" it. Select "Open this file from its current location" and click on OK.

<A HREF="finalcut.mid"><IMG SRC="keys.gif" BORDER="0"></A>

Adding a background sound to your pages

There are two common ways to do this.
For Internet Explorer:
Use <BGSOUND> tag as
<BGSOUND SRC="some_file.mid" LOOP="INFINITE">
The LOOP attribute can take a number as value, which determines the number of times the file shall play or INFINITE, which makes the sound file play endlessly.

For Internet Explorer and Netscape Communicator:
For a browser compatible background sound, use <EMBED> (see below for more details on this tag).
<EMBED SRC="desprado.mid" HIDDEN="TRUE" AUTOSTART="TRUE"></EMBED>

Using a plug-in to play audio

If you want to make use of a plug-in, you would have to put the audio file inside an <EMBED> tag.

<EMBED SRC="desprado.mid" CONTROLS="CONSOLE" HEIGHT="60" 
WIDTH="145" AUTOSTART="FALSE"><EMBED>

The <EMBED> tag takes many attributes. Some important ones are.

• SRC: the URL of the audio file.
• CONTROLS: important values associated with this attribute are CONSOLE and SMALLCONSOLE. The CONSOLE value takes 144 as width and 60 as height. The width and height for SMALLCONSOLE are 144 and 15, respectively.
• HEIGHT and WIDTH: These are required attributes of the <EMBED> tag. Their non-inclusion might result in Netscape Communicator crashing! If you specify larger values for these than demanded by the console's dimensions, gray space is added in the extra area.
• LOOP: The default value is FALSE which plays the audio file only once. When set to TRUE, the file will loop continuously. LOOP can also take a number as value which specifies the number of times the audio file will loop.
• AUTOSTART: Setting this to TRUE will play the audio file when the page loads, a FALSE value will wait for the user to click on the play button on the console.
• HIDDEN: hides the console from view if value is set to TRUE; default value is FALSE. Setting HIDDEN and AUTOSTART to TRUE will result in a similar effect as BGSOUND.
• VOLUME: takes a number between 0 and 100. The lesser the number, the lower the volume.
• ALIGN: LEFT or RIGHT
• HSPACE and VSPACE: similar to <IMG> attributes. They add horizontal or vertical space around the console.