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.
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.
Quite a few more frills are available for the <embed> tag. Table 16-2 has the full list.
The URL that points to the audio file.
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).
A true or false value that indicates whether the playback controls are visible.
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.
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).
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.
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 220.127.116.11.
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.
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.
<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 18.104.22.168.) 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:
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.
<a href="http://www.somesite.com" onMouseOver="PlaySound('ding.wav') ">Click Me</a>
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.