he following sections discuss linking to sound files, embedding sound files, autoplaying sounds, adding background sound, and using JavaScript to insert audio. We’ll continuously update and add more ways of adding audio as we learn more. Click on any of the sections to learn more about that particular technique.

• Link to sound files using the .
  
  
• Autoplay sound files, using the tag.
  
  
• Embed sound files using the tag.
  
  
• Add background sound (only for IE browsers), using the , or:
  
  
• Add sound via scripting, with on click, onload onload=”window.location=”url of sound file,” and onmouseover sounds.

Linking to Sound Files

Linking to sound files is one of the easiest ways to insert sound into your site. But linking to sound files isn’t the most exciting way to insert sound. Instead of mousing over a word and hearing a sound, your users have to click on a link and possibly wait a few seconds before hearing a sound. It’s a simple and fast way to put some sound into your site, however, and it’s one of the most commonly used ways of inserting audio.

Use the anchor tag, as shown above, to link to the sound file. If the reader wants to hear the sound they simply click on the link. For example, you might have a segment in an HTML file that looks like this:

Listen to Beethoven’s Moonlight Sonata! (Go ahead and click it?it’s a live link). This file is a 12 KB MIDI file. This sound clip is 5:07 seconds long, and if you listen to the whole thing, you might find yourself in a more relaxed mood.

Here’s what the code for that link looks like:

Listen to Beethoven’s Moonlight Sonata!

The refers to the location of the sound clip, and links to that sound clip.

The “controls=true” portion of the code tells the browser to display a sound console, so that readers may stop, pause, or rewind the sound clip. If you clicked on the above link, you saw the sound console. Our Embedding Sound page has more information on creating sound consoles.

To download and then hear the file play, the reader simply clicks on the link. After the browser downloads the sound, it launches a player and automatically starts playing the sound. The reader clicks on the stop button button to stop the music from playing.

Autoplaying Sound

After five seconds, this page will start talking to you. Or at least that’s the way it seems. One way to do this, and the way we did it for this page, is through the use of a meta tag.

Meta tags are either a storage bin for data or a way of passing information to the server. In this case, it’s a way of passing information to the server. You use a meta tag named “refresh” to force the browser to pull in something else (in this case it’s a sound file) automatically from the server after a certain amount of time has elapsed.

The most important thing to remember is that the meta tag must be the very first item in the html file. That means before the HTML tag, before the header tags?everything. Otherwise some browser/server combinations will not play the sound.

To add an automatically playing sound you:
1. Create your sound files,
2. Create your HTML page,
3. Make the meta line:

.

• The first value in the content switch is the number of seconds to wait between loading the sound file.
  
  
• The second value in the content switch is the URL of the sound file that you want to play automatically.

Remember that some of your readers won’t necessarily be expecting the sound (unless you include a JavaScript alert button!) so consider the effect sound may have on your reader before selecting this method of adding audio to your site.

Embedding Sound

The embed tag allows you to insert audio into your Web page. It also allows you to define an audio console?or control box?so your readers can control the sound. You should see an audio console on this very page. Audio consoles do not seem to appear with IE 4.0 for the Macintosh, however.

The newer versions (4.0 and above) of both Netscape and IE support this tag. It tells the browser it is encountering a plug-in of some sort. You may use the embed tag to display the plug-in?a sound file in this case?within a rectangular block or you may choose to hide the plug-in’s visual representation. When the reader clicks on the embedded sound it either downloads, then launches and plays, or the page begins to start and then the sound plays.

We’ve embedded a sound file, complete with an audio console, on this very page. Refresh or Reload this page to hear the sound again.

The code embeds a file called “8990.mid” into the page, starts it automatically as soon as the browser parses the embed tag, plays it only one time, and states there is an audio console.

The code in our page looks like this:

• The “embed src=” portion of the code refers to the location of our sound file.
  
  
• The “autostart=true” command tells the browser to start playing the sound file immediately.
  
  
• The loop=false command tells the browser to only play the file once.
  
  
• The rest of the code refers to the audio console. The “CONTROLS=”console” tells the browser to display an audio console, and the rest of the code defines the height and width of the console.

We also placed a background sound function into this page, for cross platform browser compatibility.

You use two types of switches when you embed audio: switches that define the source of your sound clip and tell your browser how to play it (general switches); and audio console switches, which determine what your console looks like.

General Switches:
src=URLname is the name of your sound file

loop=true/false/X tells the browser how many times to play the sound file. True has it loop infinitely. False has it play just once. The number 2,3,4, etc. tell the sound to loop a specified number of times. Do not use the values 0 or 1 as different browsers do not use these values in the same way. Loop=”-1″ plays the sound file infinitely.

autostart=true starts the sound playing automatically when the page loads. If you leave out the autostart switch, the sound will start playing only when the reader uses the sound controls to start it playing.

Console Switches:
To insert an audio console into your Web page, you use the controls= switch. This switch embeds the visible audio player (or console). Readers can stop, pause, reverse, rewind, and re-play the sound depending on how many controls you give your audio console. Make sure to test audio consoles on different browsers. Different browsers display consoles differently, and some browsers won’t display consoles at all.

The following is a list of several different types of consoles you can embed into your Web page:

• CONSOLE
  This embeds a “full” console, which displays a stop button, a play button, a volume button and a pause button.
  
• SMALLCONSOLE
  The smallconsole displays a play button, a stop button and a volume slider. This command sometimes works, and only with Netscape Navigator.
  
• STOPBUTTON
  This command embeds a player with only a stop button. This command works with Netscape Navigator.
  
• VOLUMELEVER
  Only a volume lever will show on this console. This command only works with Netscape Navigator.
  

You can also define whether the console is visible or not, it’s height and width, whether it has a border around it or not, and it’s alignment in relation to the text of your Web page. The following switches are used within the command:

hidden=true hides the sound file player. Your readers won’t be able to see any visual sign of the file. When people are embedding sound for background music, they’ll typically hide the file. If you want to displays the sound file player, leave out the hidden= switch and use the controls, height, width, and align tags to place the sound player in the browser window.

height=XX defines the depth of the block, in pixels, in which you want the sound player to appear.

Width=XX define the width of the block in pixels, in which you want the sound player to appear.

frameborder=no removes the border from the sound player window.

border=XX sets a width for the sound player window border. This command doesn’t appear to work in IE 4.0.

Align= This command determines where where the console is located. It’s based upon the text that follows the Embed command.

Some of the switches you can use with the Align command include:

• TOP: This command should align the player along the top edge of the text that follows the command. Unfortunately, it doesn’t work on all browsers.
  
• BOTTOM: This command should align the sound player to the bottom edge of the text that follows the command. Again, this command doesn’t work on all browsers.
  
• BASELINE: This command aligns the console along the bottom edge of the text.
  
• LEFT: The console will appear to the left of the following text. This command works with Netscape 3.0 and above, and I.E. 4.0 and above.
  
• RIGHT: The console will appear to he right of the following text. This command works with Netscape 3.0 and above, and Internet Explorer 4.0 and above.
  
• ABSMIDDLE: The command places the console to the absolute center of the text.
  

When using the embed tag:

• If you place the embed tag at the beginning of the HTML file, the sound will start playing first, then the rest of the page will load.
  
  
• If you place the tag in the middle of the HTML file, the page will start loading, the sound will begin playing, then the rest of the page will load.
  
  
• If you place the tag at the end of the HTML file, the page will load and then the sound will play.

Adding Background Sound

Background sound works only with IE, and adds a background sound to your page. The bgsound tag has two switches:

src=URLname gives the name of the sound file you want to play in the background.

loop=X/infinite lets you replay the sound a specific number of times or continually. Do not use loop=0 or loop=1, however. Different browsers interpret this same command differently. Also, avoid using loop=infinite, it doesn’t work on some browsers. It’s best to write loop=”false,” if you want your file to play one time, and loop=”-1″ if you want the file to play over and over again.

• For example, this code plays the sound file named “JAhat.mid”:
  
  
  
• This one plays it five times in a row:
  
  
  
  
• This one plays it over and over as long as the page is in the browser window:
  

Adding Sound via Scripting

Giving Sound to Links
You can use scripts to control sound in a number of different ways. One thing people often want to do is have a transition sound, a sound that plays when they click on a link to another page.

Here’s how to do this:

First, at the top of your page between the tags, you’ll add a function that tests to see what browser the reader is using and, if he or she is using IE4 or later, creates a function that we named “clickSounder.” It also calls the sound file you’ll be using; by calling for the sound here, it will play when the page first loads and remain the the browser cache, so that it needn’t be reloaded when the reader clicks on a link. That bit of scripting looks like this:

ie4 = ((navigator.appName == “Microsoft Internet Explorer”) && (parseInt(navigator.appVersion) >= 4 ));
function clickSounder(){
  if (ie4){

clickSnd.src=”/developer/audioz/AZsounds/azBut&roll/jRdrm1.mid”;
  }
}

This function works only with Internet Explorer, but it won’t break on Netscape. It’s best used in a framed table-of-contents type file.

Next, each time you add a link that plays the sound, you’ll need to add a snippet of JavaScript to your anchor tag, like this:

Scripting Sound

• The anchor tag calls the linked file as usual. In this example the linked file is called “06-scripting.html.”
• After the URL, the onClick eventhandler tells the browser that when a reader clicks on this link, it should use the function named clickSounder.
• Then you complete the anchor tag as usual, adding the linked text and the end anchor tag.
• Immediately following the anchor tag, you’ll need to specify the sound that should play, using the bgsound tag. The id switch value is “clickSnd,” the name we gave the sound we loaded as part of the script at the beginning of the page. The src switch specifies the URL of the sound. The volume switch says how loud to play the sound?values range from -1500 to 1500.

Playing Sounds When a Page Loads
Another thing you might want to do is have your sound to start playing automatically when the page loads. You can do this by adding a little JavaScript to your body tag, like this: onLoad=”window.location=’url of soundfile.”

You can determine the volume of your onclick sound?anywhere from -10000 to 0, with 0 being the loudest.

The sound will play once when page is loaded, which causes the sound file to cache. To improve functionality, the tag should be last tag in “body.”