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
In this section we’ll show you how to link some sound into your site. |
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
Learn how to jumpstart your pages with some tunes before your page is fully loaded with the META tag in this section. |
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.
Adding Background Sound
Looking for some atmosphere for your site? Add a little background sound and enhance the mood of your site. |
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
JavaScript your sound for a whole new level of sound control for your site. |
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:
- 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