Site Map

Your Current Location is in Yellow

Home

What That?

Web & Flow

The Nightmare

Background Tricks

To Style or Not

Browser Wars

I’ve Been Framed

Music!

Graphics

Great Pages

HTML FAQ

Arachnophilia

Music!

I am a professional musician. I love music. I hate Muzak, car stereos that are so loud the perpetrator’s trunk lid rattles, music on hold (on the telephone) and generally any background music.

Now that I’ve briefly expressed my feelings toward senseless drivel in the background, I will proceed to give you some pointers on using music and other sounds on your pages. When including music, be sure you are legal. If the music is not public domain (over 56 years old), you must either own the copyright or have the permission of the copyright holder to use the file.

There are three basic formats for sound: wav (including .au and .mp3), midi and streaming. Each of these has a use in the websound bag of tricks, but you need to know how and when to use each.

wav

Sound consists of cyclical, rapidly fluctuating air pressure which is translated by our ears into sound. That’s not a great scientific description, but is essentially what happens. We call them sound waves. On old wax, shellac or vinyl records, you could see the wavy grooves which caused a needle or stylus to vibrate as it rode the groove; that vibration would be amplified, and we would hear sound. In the digital era, those sound waves are captured and represented in rapidly fluctuating combinations of 0 and 1 (our old binary system friends). Considering that a moderate pitch is fluctuating a 440 cycles per second, you can see that digitally recording this sound is going to take a lot of bits. This is the long way of saying what you probably already know: wav files burn a lot of bytes. The digital recording does give excellent sound quality. Works great on a CD. But when you have to move it across an internet connection, you run into the problem of file size. So we use compression, and get smaller files without giving up too much sound quality. If you have trouble grasping the concept of balancing size with quality, think of a graphic. A high resolution bitmap graphic will look much better than a low resolution gif or jpg. You want your graphic to load in a few seconds, but you also want Aunt Hilda not to look like the Sphynx on a bad hair day. So you find an acceptable juncture of file size and resolution. Same thing with wav files. There are several compression formats available, and perhaps the best is the mp3, which greatly reduces file size without sacrificing too much quality. Unfortunately, these files are still pretty big, so you want to use them only for high quality musical offerings that visitors might want to load and play — or for short sound bites, such as sound effects or short quotes. Never use a wav file to play the latest hit or Beethoven’s Ninth as background music.

midi

Midi files consist of instructions which are carried out by your computer’s sound system. Think of midi as sheet music, and wav as the 100 piece orchestra. Which one would you rather ship crosscountry in your Volkswagen? Midi files contain instructions for pitch, duration, volume, instrumentation, etc. that are then interpreted by your midi player and played on your sound card. Midi is the choice for background music. A midi file will not sound like the New York Phil or the Back Street Boys or Elvis or Doctor Doofus. It will usually sound like canned music. On the other hand, you can create your own music in midi if you like. Whether “acquired” or sequenced with your own two hands, the midi can offer interesting music without the long download.

streaming

RealAudio is the best known and most widely supported streaming media format. Two things happen to make streaming audio work: the sound file is greatly compressed, about one-quarter the size of the same file in mp3, and the file will play as it loads. When I first used RealAudio, it was a godsend, because my opera site relies heavily on old recordings of the singers of yesteryear. RealAudio provided reasonable sound quality and started playing within a few seconds of the play button being clicked. The new and improved G2 takes advantage of faster modems, and has allowed the files to be a little larger, hence better quality sound. Unfortunately, web traffic has increased exponentially, and many phone lines simply cannot handle the traffic, so the fast modem is not much faster than the old 14.4 Kbps versions. This means you either can’t get the file to play, or it plays a few seconds, stops (the dreaded “net congestion” message), then plays a few more seconds if you are lucky. I sidestep this issue by using a commercial server that is not heavily trafficked and by allowing downloads of the files if net congestion becomes a problem.

So to recap: use wav files for very short sounds such as quotes or sound effects, or for downloads of particularly interesting music. Use midi for jukebox music or background music. If your server can handle it, use RealAudio for quickly available recorded speech and music sound files.

Techniques

For background music using midi or a quick introductory sound using a wav format, use the following code. It will work with any browser capable of making sound. I explain this in detail on the FAQ page.

<EMBED SRC="sound.mid" autoplay=true width=10 height=10> <NOEMBED><BGSOUND SRC="sound.mid"></NOEMBED>

By using the width and height = 10, I allow a little box to show for turning off the music. If you want to make like Bill Gates and force people to listen to your music (or more likely, force them to leave your page — or at least annoy them by requiring them to open their midi controller to shut off the sound), replace the width and height attribute with hidden=true. If you want the music to really drive them nuts, make it loop. To the embed tag, add loop=true and to the bgsound tag add loop=1.

There are some other options you can use, but this is the basic code. And I should mention that the EMBED tag, an invention of Netscape, is not an officially sanctioned tag. BGSOUND also is not sanctioned, and furthermore doesn't work in many browsers. Officially, background music should be attached to your page using OBJECT, but that seems not to have caught on just yet. In HTML things do change as the language becomes more refined and more powerful, and you need to keep abreast of developments so you can keep your code clean and functional.

For music on demand using midi or wav:

<A HREF="toons.wav">Toons</A>

RealAudio requires two files: the media file (.ra for older versions or .rm for newer versions), which contains the recorded music or other audio, and the metafile (.ram or .rpm), which will launch the player and call up the media file.

The metafile is simply a plain text file that contains the URL of the media file. To make a metafile, use Notepad, SimpleText, TextPad, Arachnophilia or any other plain text editor. Do no attempt to use a wordprocessing program, webpage maker, wysiwyg editor, etc. Do not add any html tags, spaces, hard returns, etc to the file. It should look like this:

http://www.mydomain.com/directory/foo.rm

Save the file as foo.ram

Finally, link the file to your page:

<A HREF="foo.ram">Foo</A>

You can also use the EMBED tag to place the RealAudio file on your page. If you want to play your RealAudio file as background, try placing this in the BODY tag:

onLoad("location.href='foo.ram'")

Making RealAudio files is easy. Start with a wav file, then use RealProducer to convert the file — this is one case where I use, and highly recommend using, the Wizard. RealProducer is available free at http://www.real.com.

Copyright © 1999 Carlton Higginbotham, Meade Street Productions.
No part of this site, including graphics and text, may be reproduced without written permission. Please post questions and comments on the Forum

Last updated GMT