spacer

Web Publishing for Starving Students

Pencil Image Map

Sound File Formats Sound File Formats  Links to Sound Tools Links to Sound Tools

Simple HTML Tags That Add
Sound to Your Page

Boy with a Pencil

There are two ways to add sound to your Web page.

  1. Adding a link to the sound.
  2. Embedding the sound in your page.
Below are simple HTML tags that you can add to the body of your page to add a sound file. The code printed in red is what you copy exactly. The code printed in green is what you change to the name, extension, or size of your sound file. You must also add the folder name, if your sound file is in a sub folder. ("sounds/mysong.mid")


Linking to a Sound File

Linking a sound file to text:
<A HREF="mysong.wav"> My Song - 200k WAV sound file </A>
Linking a sound file to an image.
<A HREF="mysong.aif"><IMG SRC="speaker.gif" WIDTH="72" HEIGHT="100"> My Song - 200k AIF sound file</A>

Embedding Sound Files in Netscape Navigator Web Pages.

Including a small console with play and stop buttons. The sound will start when the viewer pushes the start button.

<EMBED SRC="mysong.mid" CONTROLS="SmallConsole" WIDTH="145" HEIGHT="15">

If you want to make the visible controls really tiny, try these sizes:

<EMBED SRC="mysong.mid" CONTROLS="SmallConsole" WIDTH="50" HEIGHT="15">

Making the sound begin to play automatically. The "loop=#" value is the number of times the sound will repeat. ' Loop="true" ' repeats the song continuously.
<EMBED SRC="mysong.mid" CONTROLS="SmallConsole" WIDTH="145" HEIGHT="15" AUTOSTART="true" LOOP="2">
Hiding the controls so that they don't appear on the page.
<EMBED SRC="mysong.mid" CONTROLS="SmallConsole" WIDTH="144" HEIGHT="15" AUTOSTART="true" LOOP="4" HIDDEN="true">

Embedding Sound Files in Internet Explorer 4+ Web Pages.

Including a small console with play and stop buttons. (Internet Explorer 5 will include a pause button). The sound will start when the viewer pushes the start button.

<EMBED SRC="mysong.mid" WIDTH="69" HEIGHT="25">

Making the sound begin to play automatically. The "Playcount=#" value is the number of times the sound will repeat. ' A value of 0 plays the sound continuously.

<EMBED SRC="mysong.mid" WIDTH="69" HEIGHT="25" AUTOSTART="true" PLAYCOUNT="2">
Hiding the controls so that they don't appear on the page. Set the width and height to 0.

<EMBED SRC="mysong.mid" WIDTH="0" HEIGHT="0" AUTOSTART="true" PLAYCOUNT="4">

Note: The size given here looks better with the controls in Internet Explorer 5 than Internet Explorer 4. However, the controls do display in Internet Explorer 4.


Embedding a Sound File So That it Plays in Both Netscape and Internet Explorer 4+ Browsers. The controls will visible in each.

To include the code for both browser brands, use a little JavaScript on your page. The script will check to see if your browser is Netscape. If it is, it writes the code for Netscape on your page. If your browser is not Netscape, the script will write the code for Internet Explorer on your page. This script will be totally ignored by Internet Explorer 3 and no sound will play in that browser.

<Script Language="JavaScript1.1>
<!--

If (navigator.appname == "Netscape") {
document.write("<embed src='mysong.mid' height=15 width=50 controls=smallconsole autostart=true loop=1>")
}

else {
document.write("<embed src='mysong.mid' width=69 height=25 autostart=true playcount=1>")
}

//-->
</script>


Embedding a Background Sound in Internet Explorer Web Pages only. The controls will be invisible.

Embedding a background sound that plays automatically.
<BGSOUND SRC="mysong.mid">
Controlling the number of times the background sound repeats. Typing "Loop=-1" or "Loop=infinite" will play the sound continuously.
<BGSOUND SRC="mysong.mid" Loop="3">

Important Notes:

  1. Both browsers recognize .aif, .au, .mid and .wav files without plug-ins or helper applications for the "Embed" tag.
  2. The Internet Explorer "Bgsound" tag recognizes and plays .wav, .au or .mid sound files.

Pencil Image Map

Sound File Formats Sound File Formats  Links to Sound Tools Links to Sound Tools

HTML EditorsGraphicsAnimationPublishingHome

Please send feedback. We'd love to hear from you!