Hack 44 Annoy Them with Sound

Drive away your bidders by putting background music and sound effects in your auctions.

Although I despise sound in web pages, I feel compelled to show you how to do it properly so you don't pick up any bad habits on the street.

The number-one rule to remember when including sound or music in web pages is to provide a means of turning it off. Otherwise, your bidders will eventually discover the workaround by themselves . . . and they probably won't come back.

4.13.1 Some Call It Elevator Music

You can insert background music (in either .wav or .midi format) into your auction with this line of code:

<bgsound src="http://www.ebayhacks.com/files/aah.wav" loop=1>

where the loop parameter specifies the number of times to play the sound. The problem is that the <bgsound> element has no controls: no way for your customers to turn off the sound or adjust the volume. In other words, a poor choice.

The more general-purpose <embed> tag can do everything <bgsound> does, but it also includes a controller box:

<embed src="http://www.ebayhacks.com/files/aah.wav" hidden=false autostart=true loop=true></embed>

The loop=true parameter can be replaced with playcount=3 to play the sound a specified number of times and then stop. Go to www.htmlcodetutorial.com for further documentation on embedded objects.

4.13.2 When to Use Sound

Sound can be useful when text and photos just won't do. For example, if you're selling a music box, you may want to include a clip of the music it plays, especially if you don't know the name of the song. Or, if you're selling a product that modifies sound (such as a car exhaust silencer), your customers will appreciate being able to hear, first-hand, what it sounds like with ? and without ? your product. And obviously, if you're selling music on CD, tape, record, or DVD, you may want to include a short clip to entice your bidders.

Even given these perfectly legitimate uses for sound in your auctions, it still makes sense to give your bidders control over the sound, rather than simply having it play automatically in the background.

Making Sound Files

Any modern computer can record sound; all you need is a microphone to record ambient sounds, or the proper cables to connect to a stereo and record audio from a tape, record, or DVD. Just use your computer's sound recorder application, record a few seconds of audio, and save it into a .wav file.

The exception is audio CDs, which can simply be inserted into your computer's CD drive; as long as you have the proper software, any audio track can then be "ripped" to create a .wav file. Nearly all CD recorder software supports this, as do advanced sound applications such as Sound Forge (available at www.sonicfoundry.com). Or, if you simply want to use canned sound effects, go to www.freeaudioclips.com.

Either way, you'll need to ultimately host your .wav file on a web server, as described in [Hack #59], before you can reference it with the code in this hack.

4.13.3 Hacking the Controller

The actual audio controller that appears on the page depends entirely on the browser plug-in currently configured to handle sound objects. (Note that users without an appropriate plug-in installed will just see an empty box and won't hear any sounds at all.) Instead of using the default controller, which is usually large and rather clumsy, you can integrate the controls into your auction description quite nicely.

First, we need to modify the <embed> tag to hide the default controller, turn off the autostart feature, and give it a name, mySound, that we can reference with JavaScript:

<embed src="http://www.ebayhacks.com/files/aah.wav" hidden=true 
autostart=false loop=false name="mySound" mastersound></embed>

Since it's now hidden, it doesn't strictly matter where you put the <embed> tag. In most cases, it's probably best to place it at the end of the auction description so browsers will load the rest of your auction before the sound file. Next, include these links in your text to control the audio:

<a href="javascript:document.mySound.play(  );">Listen</a>
to the music made by this music box. When you're done, you can
<a href="javascript:document.mySound.pause(  );">Pause</a> or
<a href="javascript:document.mySound.stop(  );">Stop</a> the music.

( Volume: <a href="javascript:document.mySound.setVolume(33);">Soft</a> | 
<a href="javascript:document.mySound.setVolume(66);">Medium</a> | 
<a href="javascript:document.mySound.setVolume(100);">Loud</a> )

The "controller," in this case, will simply appear as ordinary text links in your auction description. The text links can also be replaced with images to make a fancier controller.

4.13.4 Quick-and-Dirty Links

If you find that a controller in your description is overkill, you can simply link to your audio files directly, like this:

<a href="http://www.ebayhacks.com/files/aah.wav">Listen</a> to the music made by this music box.

The problem is that about a third of your bidders will get a download prompt and nothing else, and will probably not know where to go from there. If you choose this solution, you'll want to include a bit of instruction, telling them to save the files on their desktops and then double-click the icons that appear.