WebDevelopersNotes logo

home-icon Home / HTML / HTML training course – Including sound and music

HTML training course – Including sound and music

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>

Including sound and music on web pages

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


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.


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.
  • HSPACE and VSPACE: similar to <IMG> attributes. They add horizontal or vertical space around the console.

FYI, iLike.com is an online service that lets you create a songs playlist and include it on your web page. There is no need to register or open an account… in fact, you can create your playlist in a few minutes. For step by step instructions, please read how to add songs and music on web site using iLike.com.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

If it's on the Internet, it must be true.

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


Though the digital data on the Internet resides on millions of interconnected servers, the net itself is just data transfer which takes place by electrons and radio waves. Russell Seitz, a physicist, tried to find the weight of the Internet based on this. His calculations, using Einstein's famous e = mc2 formula, revealed that the mighty Internet weighs as much as a strawberry. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy