Section 16.2. Background Music
Most people like to browse the Web in peaceful silence. That means no trance-hypno-ambient background tracks, no strange disco beats, and no sudden cymbal crashes. This aversion to noise may be due to the fact that something like 98 percent of all Web surfing takes place on company time.
But if you like to startle and annoy people, or if you're absolutely convinced that your Web audience really does want some funky beats, keep reading to bring on the background music.
16.2.1. The <embed> Tag
Although the HTML standard doesn't include official support for background music, almost all browsers support the <embed> tag, which was first pioneered by Netscape browsers in the early days of the Web. You can put the <embed> tag anywhere on your page. Here's a basic example of a Web page that includes background music:
<html> <head> <title>Background Music</title> </head> <body> <h1>Automatic, Unsolicited Music</h1> <p>The music now blaring from your speakers is Scarlatti's first sonata (K. 500). I hope you didn't tell your colleagues you were working!</p> <embed src="soundfile.mid"> </body> </html>
When using the <embed> tag, you have a slew of different options that allow you to control whether or not the playback controls are shown, and whether the music starts automatically. If you use the <embed> tag without specifying any of these details (as in the previous example), your visitors will see a page like the one shown in Figure 16-3.
|
Music playback isn't always this seamless. Because every browser performs this task a little differently, you can run into problems like the ones shown in Figure 16-4. The best advice is to test your Web page on as many browsers as possible.
|
Ordinarily, the <embed> tag starts the music playing as soon as the music file is downloaded. Visitors can kill the sound with a quick click of the stop button, but if they're not expecting to hear a burst of music, it's still enough to frazzle some nerves.
| GEM IN THE ROUGH Finding MIDI Files |
| Although MIDI files usually sound synthesized and cheesy, you can't complain about the number of tunes available online. With a simple Google search, you can usually dig up MIDI files for your favorite band , movie, computer game, or classical composer. Technically, it's against copyright rules to use a MIDI file of another artist's work on your Web site. However, there's a fairly large gray area. First of all, MIDI files are usually sequenced ( composed ) by fans or amateur musicians . So not only do they lack real instruments and vocals, they may also contain outright errors. In that respect, putting a cheap MIDI file on your Web site is a little bit like listening to a Led Zeppelin cover bandit's a tribute to the original, not a competitive threat. That's why music companies haven't made any effort to crack down on MIDI files. If you want to steer clear of copyright issues altogether, you should stick to music that's in the public domain. Music that was created before 1923 falls into this category, which means you're free to draw from a huge catalog of classical pieces. To download your favorites, try the Classical MIDI Archives (www.classicalarchives.com). |
A more polite option is to show the playback controls but not start the music until the visitor clicks the play button. This design is easyjust use the autoplay attribute:
<p>If you'd like some soft music to browse by, click the play button.</p> <embed src="soundfile.mid" autoplay="false">
Turning off autoplay is considered very good Web etiquette. A much poorer idea is the hidden attribute, which lets you hide the playback controls altogether. All too often, you'll find Web pages that use <embed> tags like this:
<embed src="soundfile.mid" hidden="true">
In this example, the sound file plays automatically. Because the playback controls are hidden, the only way to stop it is to lunge for the volume control. Web sites that put their visitors through this ordeal rarely see a return visit.
Note: Unfortunately, autoplay and hidden playback controls are all too common. Some Web designers become intoxicated with their newfound multimedia abilities , and decide it's not enough to let visitors listen to musicthey need to force them to do it. Resist the urge.
Quite a few more frills are available for the <embed> tag. Table 16-2 has the full list.
Table 16-2. Attributes for the <embed> tag
| Attribute | Description |
|---|---|
| src | The URL that points to the audio file. |
| autoplay | A true or false value that indicates whether the audio should start playing immediately (true) or wait for the Web surfer to click the play button (false). |
| hidden | A true or false value that indicates whether the playback controls are visible. |
| loop | A true or false value that indicates whether the audio should be played once (from start to finish), or repeated endlessly. When looping audio, you'll notice a distinct pause before the audio restarts. |
| volume | A percentage between one percent and 100 percent (100 percent is the loudest you can get). 50 percent tends to produce the standard volume on a Windows computer; on Macs, the equivalent effect comes with a value of 75 percent. Set it to 100 percent, and you can be sure you won't get any repeat visitors. When you use the volume attribute, just supply a number (leave out the % sign). |
| border, width, and height | These attributes let you set the dimensions of the playback controls and the border around them, in pixels. You can achieve greater customization by applying a style sheet rule (see Chapter 6). |
16.2.2. Other Audio Formats
As you learned earlier on, MIDI files are remarkably small because they don't store recorded sound. Instead, they contain a series of musical notes that are played using the built-in instruments on your computer's soundcard. As a result, they don't usually sound that great, and they don't sound the same on everyone's computer. MIDI files are fun, but they often make a site seem amateurish.
What if you want something a little more upmarket? You could use a WAV file, which is an uncompressed digital audio file format first introduced by Microsoft but now supported everywhere. Most computers have software for recording WAV filesfor example, on Windows computers you can usually find a program called Sound Recorder lurking in the Programs 
Accessories Entertainment section of the Start menu. Mac fans may want to use the free program Audacity (http://audacity. sourceforge .net), which is also available in a Windows version.
You can use a WAV file with the <embed> tag in exactly the same way as a MIDI file:
<embed src="soundfile.wav" autoplay="false">
The problem with WAV files is that they're really, really big. In fact, they're enormous . Think of the file size of an MP3 file, and multiply it by ten. As a result, it rarely makes sense to use WAV files in a Web page. On a typical mid-speed connection, your visitor would have a long wait before the complete music file trickled down and playback started.
Note: A typical MIDI file is even smaller than a typical image. A 100 kilobyte (KB) MIDI file could handle the first movement of a detailed symphony.
Another option is to use MP3 files. This approach works great in newer browsers, but older browsers may ignore your command or launch another program.
<embed src="soundfile.mpg" autoplay="false">
If you're interested in trying this option, keep your file small and try it out on the browsers your visitors use. A 10-second MP3 file takes a modest 170 KB. As a rule of thumb, most Web authors suggest you keep your audio clips limited to 30 seconds if you use autoplay.
Sadly, the <embed> tag won't help you create those nifty looping soundtracks . Even though you can use the loop attribute, the results aren't good, because the <embed> tag doesn't loop cleanly. Instead, it pauses each time it reaches the end of your audio file. If you want a slick looping soundtrack, you'll need to use Flash, as described on Section 16.4.2.3.
Tip: There's lots of great shareware available for recording WAV audio files and converting WAV audio files into the more compact MP3 format. Two bargain basement choices that are free to try are GoldWave (www.goldwave.com) and FlexiMusic (www.fleximusic.com). If all you want to do is convert existing WAV files to MP3 format, you can use Apple's iTunes software, available for both Windows and the Mac (www.apple.com/ itunes ). You can get the job done by right-clicking (Control-clicking) any song name and choosing, from the pop-up menu, "Convert Selection to MP3."
16.2.3. Sound Effects
Ever wanted to create one of those Web pages where every mouse movement unleashes a sound? For example, maybe you want a whoosh when your visitors move over a button or an audible click when they click a link.
Sadly, there's no perfect solution that will work with every browser. But there are two compromises:
-
Use Flash, which lets you construct an entire page with sound effects for the most minute of actions. The problem here is that the browser needs to have the Flash plug-in installed.
-
Use the < bgsound > tag (short for background sound) along with the JavaScript technique you'll learn about next . The key limitation with this technique is that it only works with Internet Explorer 5 and latermost other browsers and older versions of IE ignore your background sound effects altogether.
Several versions of this script are available online. The one you'll see in the next example (and available via the "Missing CD" page at www.missingmanuals.com)is one of the simplest. If you dig around on the Internet, you can find similar versions that preload their audio files, which delivers better performance. Without preloaded sounds, your visitors may experience a slight delay the first time they play an audio file because the file needs to be downloaded.
To use JavaScript- powered sounds, start by adding a <bgsound> tag in the <head> section of your Web page. The <bgsound> tag is an IE-specific version of the <embed> tag. The trick is, you won't supply any source file for this tag. Instead, you'll set the source to start playing only when something actually happens on the page:
<bgsound src="" id="SoundEffect" autostart="true" loop="1">
Notice that the <bgsound> tag is named SoundEffect. (The id attribute uniquely identifies a tag in your documentfor a refresher, see Section 9.2.2.2.) The last two attributes in the <bgsound> tag instruct it to play audio files immediately ( autostart="true" ) and play them exactly once ( loop="1" ).
The next step is to add the script with the PlaySound() function to the <head> portion of your page. The PlaySound() function has one roleit finds the <bgsound> tag and points it to the music file you want to play:
<script type="text/javascript"> function PlaySound(soundfile) { if (document.all && document.getElementById) { document.getElementById("SoundEffect").src=soundfile } } </script> In other words, it's up to you call the PlaySound() function and supply a sound file name. The PlaySound() function then adjusts the <bgsound> tag by setting its src attribute, and the background sound plays immediately.
Remember, functions just hang around idly until you call them. Your Web page won't make a beep until a JavaScript event occurs and triggers the PlaySound() function. Here's how you can use the PlaySound() function to play a sound named soundeffect.wav when a visitor moves her mouse pointer over a link:
<a href="http://www.somesite.com" onMouseOver="PlaySound('ding.wav') ">Click Me</a> The only problem here is that if you want to add sound effects like this to several links, you need to hook up every single link separately , even if they all use the same audio file. But don't despair. There's a solution courtesy of www.dynamicdrive.com. A second JavaScript function, named BindSound(), lets you add a sound effect to all the tags of a certain type in a certain container.
For example, if you want to add a sound effect to a group of links, pop them into a <div> tag, like this:
<div> <a href="http://www.somewhere.com">Click Me</a> <a href="http://www.somewhere.com">Click Me</a> </div>
Now, instead of adding the onMouseOver attribute to every <a> tag, you can attach it to the <div> container using the BindSound() function. The BindSound() function takes three argumentsthe type of tag that you want to hook up, the sound effect file name, and the container that contains the tags you want to hook up. Here's an example:
<div onMouseOver="BindSound('a', ding.wav', this)"> <a href="http://www.somewhere.com">Click Me</a> <a href="http://www.somewhere.com">Click Me</a> </div> Notice that for the first argument, it's important to leave out the angle brackets (for example, use "a" to hook up every <a> anchor tag). For the third argument, you can always use the keyword this , which refers to the current tag (in this case, the <div> container). The end result of this example is that every anchor in the <div> section is linked to the ding.wav audio file.
You can use this trick to put sounds on your entire pagejust add the onMouseOver attribute to the <body> tag that contains the whole Web page.
You can get the full code with the BindSound() function from the "Missing CD" page for this chapter at www.missingmanuals.com.
Tip: Looking for some free sound effects to use with this script? Try out www.grsites.com/sounds and www.freeaudioclips.com.
EAN: N/A
Pages: 135