Html training course, sound and music HTml training course tutorial online free, free online music and sound html tutorial guide
html training course, sound and music HTml training course tutorial online free, free online music and sound html tutorial guide
HTML training course - Including sound and musicGo to HTML training course - Including sound and musicAdvanced HTML tutorialGo to advanced HTML tutorialWeb development tutorialsGo to web development tutorialsHomepage

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).
<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.
Back to introduction Next


AddThis Social Bookmark Button
Page contents: Html training course, sound and music HTml training course tutorial online free, free online music and sound html tutorial guide

Page URL: http://www.webdevelopersnotes.com/tutorials/adhtml/ html_training_course_including_sound_and_music.php3



Join Mailing List


Feedback/Questions




50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine
Search WebDevelopersNotes.com