Add Sound!
This Page Contains:

Basic Information About Sound Files

The two most widely supported file formats for sound files are MIDI and WAV. As with graphic files, you'll want to keep the size of the file as small as possible while maintaining quality.

The differences between WAV and MIDI are that MIDI files are generally a great deal smaller, however, many types of audio, such as speech, don't work well as MIDI files. MIDI is a good file format for music. A one minute WAV file can be as large as 1MB in size, while a 1 minute MIDI file can be less than 25K. Using software convertors, it may be possible to resample WAV files to reduce their file size. See the bottom of this page for links to helpful software sites.

Create a Clickable Link to a Sound File

The HTML to add a clickable link to a sound file is simple. You'll use the A HREF tag to point to the audio file. If you need help creating a path to the file, review our paths tutorial. You'll want to add a tag that looks like this:

<A HREF="cat.wav"> Click here to hear my cat meow.</A>

The words "Click here to hear my cat meow" will become a link that will cause the sound file to load when clicked. You can also create a clickable link with a graphic:

<A HREF="cat.wav"><IMG SRC="caticon.gif"></A> <BR> Click the cat! (6K File)

Which looks like this on a page:

Click to hear the cat meow
Click the cat! (6K File)

The benefit of adding audio this way is that you give your web site visitors a choice of hearing the sound file. Since audio over the Internet is less than perfect, and the file sizes can be large, consider offering this choice to your web site visitors.

Create Sound Files That Play Automatically

Now things get sticky. You'll need to use two different HTML tags to play a sound automatically for both Internet Explorer and Netscape Navigator. (Big sigh). However, before we jump in, take a moment to think:
Do I really, really, really want to automatically load an audio file?

If a web site visitor has to wait for an audio file to load, you're giving them an opportunity and an excuse to leave your web site. The longer the wait, the larger the chances are that they will leave. So carefully consider your file sizes and placement of automatically playing sound files.

Here are the tags you'll need. The BGSOUND SRC tag is for Internet Explorer, the Embed tag is for Netscape Navigator:

<BGSOUND SRC="sound.wav" LOOP=INFINITE>
<EMBED SRC="sound.wav" AUTOSTART="true" HIDDEN="true" LOOP="true">

This will create an infinitely looping sound for both IE and Netscape. To create a sound that doesn't loop:

<BGSOUND SRC="sound.wav" LOOP=0>
<EMBED SRC="sound.wav" AUTOSTART="True" HIDDEN="True" LOOP="false">

With the later versions of Internet Explorer, however, the above tag will give IE users two sound controls. To avoid that, add the NOEMBED and closing /NOEMBED tag around the BGSOUND SRC tag:

<NOEMBED>
<BGSOUND SRC="sound.wav" LOOP=0>
</NOEMBED>
<EMBED SRC="sound.wav" AUTOSTART="True" HIDDEN="True" LOOP="false">

Links to Shareware and Freeware Audio Files and Tools

  • CoolEdit is a Windows shareware program for converting and creating audio files.
  • GoldWave is another audio editor and convertor for Windows.
  • SoundApp is an audio convertor for the Mac
  • MidiWeb - offers technical information about MIDI files and MIDI interfaces, a library of downloadable MIDI files,
  • FileCity offers a huge archive of MIDI files, including movie theme songs, rock music, holiday songs, and more.
  • The MidiFarm also offers a library of downloadable MIDI files.
  • WavCentral offers a huge archive of audio files that you can download.
  • MovieWavs offers...you guessed it! Wav files from popular films.
  • The Wav Place - offers movie audio clips, cartoon sounds, and music files.
  • Download some tiny sound files from Microsoft, including a cat collar, doorbell, alarm clock and a lot more.
  • Interested in creating music across the Internet with other people?
Create Your Own Web Adventure with the Web Diner!

All content copyright of Web Diner Inc., 2000. Do not redistribute or repost this content.
Tutorials | Home | Glossary
1