[ Layout ] [ Multimedia ] [ Programming ] [ Scripting ] [ Communicate ] [ Navigation ]

Sound

[ Up ] [ 2D Design ] [ 3D Design ] [ GIF Animation ] [ Sound ] [ VRML ] [ Clipart Links ] [ Multimedia Links ]

Sound is a very valuable asset to a web page.  It allows the author to draw in another sense, and it has been shown that the more senses are involved in an activity, the more likely they are to remember it.  Web pages almost always involve sight, but sound allows another type of interacting with the data, enhancing the feel of the site.   Thus, this page will explain how to use sound in a web page.

There are several ways to link sound into a site.first, you can provide a link to a sound file so that users can open the file, download it, and play it.  Here is a link to a MIDI file.  MIDI is a good format for the web because it runs well on almost all systems that have a sound card, and is a small download.  However, it can only be used for instrumental music.

Next, in Internet Explorer, you can use a BGSOUND tag to have a sound (either MIDI or Wave) play in the background of a page, without any user controls.  Using the BGSOUND tag you can control how many times the file loops, but nothing else.

The BGSOUND tag is used as follows:
<BGSOUND SRC="filename" LOOP="loopval">
with filename being the name of the file, and loopval being either the number of times you want it to repeat, or -1 if you want it to repeat forever.

Both IE and Netscape support plugins, through the EMBED tag.  For background sounds, you could use the following tag:
<EMBED SRC="filename" LOOP="-1" HEIGHT=0 WIDTH=0></EMBED>
<NOEMBED>Here is a <A HREF="filename">link</A> to the file intended as a background sound.</NOEMBED>

EMBED can also be used for embedding controls for playing a sound into a page.   You can do that by simply omitting the Height and Width attributes.  Note that the EMBED tag uses whatever plugin the user has installed for that media type, so the plugin that is used may use larger or smaller controls than you expect, and may not support some attributes for the EMBED tag.

In HTML 4, the OBJECT tag was added.  It had also been supported in IE 3, but only for ActiveX controls.  the HTML 4 version allows any type of media to be put in an OBJECT tag, including images, video, and audio.  Also, the OBJECT tag can provide content for older browsers.  You do this by putting alternate content inside the OBJECT tag.  Browsers which understand OBJECTs and have an appropriate viewer use that content, but otherwise, they use the content inside the object.  OBJECT tags can even be nested, allowing three of four possible formats to be chosen from.  Ex:

<OBJECT DATA="thesound.wav">
<OBJECT DATA="thesound.aiff">
<OBJECT DATA="thesound.au">
<OBJECT DATA="thesound.snd">
There are four versions of this sound to choose from.
<UL>
<LI><A HREF="thesound.wav">.WAV</LI>
<LI><A HREF="thesound.aiff">.AIFF</LI>
<LI><A HREF="thesound.au">.AU</LI>
<LI><A HREF="thesound.snd">.SND</LI>
</UL>
</OBJECT>
</OBJECT>
</OBJECT>
</OBJECT>

This section of HTML first tries to put the sound into the page, trying four different formats, the most common sound formats for Windows, Mac, and UNIX.  If it can't put any of them in the page using the OBJECT tag, or it doesn't support the OBJECT tag, it will display the links.  Both IE 4 and Netscape 4 can use the Object tag for sound files.

Here are the most useful attributes for putting sound in a web page using the OBJECT tag.

  • DATA="value": Specifies where to get the sound file from.
  • TYPE="value": Specifies what kind of file it is.  This should be a MIME type, such as audio/wav or audio/mid.  If you do not specify this, the browser will try to determine the file type using the file extension.
  • HEIGHT="value": How much vertical space should be set aside for the object
  • WIDTH="value": How much horizontal space should be set aside for the object
  • HSPACE="value": How much horizontal space to put between the object and surrounding content.
  • VSPACE="value": How much vertical space to put between the object and surrounding content.
  • ID="value": Useful if you intend to script the object, or apply special stylesheet effects to it.

There are many sites on the Internet which have archives of free sounds and music which you can download and use on your site.  A short list follows, but more can be found by searching a little.

 
[ Layout ] [ Multimedia ] [ Programming ] [ Scripting ] [ Communicate ] [ Navigation ]
[ 2D Design ] [ 3D Design ] [ GIF Animation ] [ Sound ] [ VRML ] [ Clipart Links ] [ Multimedia Links ]

The Web Wizard's Spellbook © 1998, Team WWS