Hear Ye, Hear Ye

You want your Web message to be heard? Start integrating audio with your Web sites in this first of a three-part series

by Bob Weibel

Hear that? Of course not, you're reading. But you could be listening, because as you may know, the Web is a multimedia thing, designed to carry text, graphics, video, and audio. All Macs and most PCs on the market come with sound chips or audio adapter cards that enable the playback of audio data. And Web audio is moving past the lunatic fringe into the mainstream, with technologies such as Real Audio, which lets folks broadcast and receive talk shows, concerts, and recorded music over the Internet. Emerging audio file format standards such as MP3 catch headlines as folks prepare to buy or steal their favorite recordings over the Web.

• Sound is big: It's easy to add snippets of sound to a Web page.
• Doing audio right: Because most people's Web connections are slow, there are basically two ways to make audio practical.
• Easy sound: The easiest way to add "background" sounds to your site.
• Background audio in NetObjects Fusion: It couldn't be easier.
• Plugging in: Browsers aren't always sound-savvy. Here's what can make them sound better.
• Audio file formats: Sound comes in a lot of forms—here's a list of the most popular.

While audio can add real value to your site, as with any other technology, you should only add it to your site if it is necessary and adds something that text and graphics alone can't.

Sound is big

It's easy to get short snippets of sound onto a Web page, say for background music, and other cutesy stuff. But the story gets major hairy in short order once you're talking about more than a few seconds of CD-quality recorded sound. That's because, like video, sound is a moving thing: each split second of sound takes a lot of data, so it adds up fast.

I dabble in sound editing, and I'm not shocked to know that 15 seconds of uncompressed CD-quality music needs about 3MB of space. If I simply popped that file onto a Web page, for playback, a typical visitor with a 28.8 - 56K bit-per-second modem would have to wait for a half-hour or more for the 3MB download before the visitor could even start to hear the tune.

Doing audio right

So, given the relatively slow data rate of the typical modem connection to the Internet, you've got basically two ways to do audio right:

• Lite 'n' simple: You can embed short, compact snips of audio right on your Web page so only small 50K to 100K files need to download before playback. Background music, little buttons that go "boing," or very short, low fidelity pieces of music or voice that may serve as audio examples in on-line music lessons or language lessons are examples.
• Hot 'n' Heavy: For lengthy, hi-fidelity audio segments, you should use what's known as "streaming" audio. In streaming audio, the sound data starts playing as it arrives at your computer. Your Web audience doesn't have to wait for the whole gazzillabyte sound file to download before a rock concert plays back or a talk show starts, for example. Unfortunately, streaming audio is complicated. It often requires special sound-file servers, uses specialized compression, and requires rigorous sound editing and other heavy stuff.

Part 1: Easy sound

So we don't scare you off, we're going to tackle "streaming" audio in a follow-up, Part 2, article. Once you've played with the basics of "lite audio" as described above, streaming audio won't seem like such a big leap.

There's a lot to know about the capabilities of different audio file formats and the browser software needed for playback, even when you're simply embedding short audio segments. But before we get into all that I'll cut some of the suspense and show you how easy it can be to put some audio on your Web page and get it to play back, using features in NetObjects Fusion 4.0. Then we'll fuss the details.

Background audio in Fusion 4.0

Fusion 4.0 makes it dead easy to get background music to play on your Web page. (Be warned, though, that folks generally don't take kindly to Web background sound unless it's highly relevant to the content, based on the Web chat I've seen.)

Step 1: Create a new page, or go to the page that will have a background sound.

Step 2: Open the Layout Properties palette. To do that, click View/Properties Palette, or right click on a blank portion of the page and select Layout Properties from the pop-up menu.

Step 3: Once you've got the Layout Properties palette on screen, click on the middle tab labeled "Background." In the Sound section at the bottom of the box, click the Sound check box.

Step 4: A Background Sound dialog box pops up when you click the Sound check box. Click its browse button and navigate to the \Fusion 4.0\Samples\Content\Sounds folder on the drive where you've installed Fusion. NetObjects has placed some demo audio files there in a range of file formats for you to play with.

For the sake of demonstration, select MIDI Files (*.midi, *.mid) from the "Files of type:" drop-down list. Then select the "demo0001" audio file, and click OK. (We'll describe MIDI sound files and others later on.)

While you're at it, also click the "Continuous Loop" check box. You'll notice the effect later, when you view the page through a browser. "Looping" will automatically restart the music segment to keep it playing continuously. When you do that, it helps to choose music the whole world loves, otherwise, people may leave your site just to stop the music!

Step 5: Take a breath; you've just made your first step into Web audio. Be sure you've got your computer's speakers turned on, and then control-click on the Preview button to preview the page in your browser.

Pluggin' in

Hmm. You say you're hearing the sounds of silence? Like, nothin's-ville? That's because, barring any problems with your sound card or speakers, your browser may not have the smarts, yet, to actually play the MIDI sound file. Neither Netscape Navigator 4 nor Internet Explorer have much built-in capability for playing sound files. (One exception is Navigator's built-in support for RealAudio streaming audio, and the HeadSpace Beatnik Player.)

But help is just a download away, via plug-in files that add special talent to your browser of choice. To see the plug-ins currently installed for Navigator 4.0 click Help//About Plug-ins. You'll see an alphabetical list of installed plug-ins, each accompanied by a table showing the types of files each plug-in can handle. (Navigator keeps its plug-ins in the \Program Files\Netscape\Communicator\Program\Plugins folder of whichever drive you've installed Netscape Navigator.

At the end of the article we'll post some links to sites offering audio plug-ins for Navigator and/or Internet Explorer. Note that some plug-ins handle several audio-file formats. As you can see, Headspace Beatnik Player for Navigator, for example, handles most of the audio formats that Fusion 4.0 supports, which we'll discuss below.

Audio file formats

You've got a choice of audio file formats when it comes to inserting sound files in your Fusion Web pages. Some may serve better for certain purposes, so here's a summary of the formats that will work as background sounds:

• Windows Wave (.wav)—Developed jointly by Microsoft and IBM, support for WAV files was built into Windows 95 making it the de facto standard for sound on PCs. Most Windows and some Macintosh applications that support sound will play Wave files. Windows' Media Player will play Wave files.
• Audio Interchange File Format (.aiff)—Defined by Apple for the Macintosh, AIFF is also the format of the sound files on the Iris Indigo.
• Musical Instrument Digital Interface (.midi, .mid)—Pronounced middy, MIDI is a standard adopted by the electronic music industry for controlling music synthesizer devices, whether the synthesizer's built into a keyboard or a sound card. Unlike the other formats here, MIDI files are actual audio recordings.They're a set of instructions that tell a MIDI-compatible synthesizer what to play in order to reproduce a musical composition. The audio instructions include values for the note's pitch, length, and volume. It can also include additional characteristics, such as attack and delay time. In a sense, MIDI is like the paper roll in a player piano.
       These MIDI instructions consume much less data than recorded sound files such as Wave, AIFF, AU, and RealAudio. Most synthesizers support MIDI, so sounds created on one synthesizer can be played and manipulated on another synthesizer, though they may not sound exactly the same.
• Audio (.au)—Audio is a common format for sound files on UNIX machines and also the standard audio file format for the Java programming language.
• RealAudio (.ra, .ram)—As a streaming audio, RealAudio files require RealAudio Web server-resident software. But you can also embed RealAudio files on your Web page.
• Rich Music Format (.rmf)—Created by a company called Headspace (www.headspace.com), which designed RMF to deliver high-quality music and sound over the Internet.
  
  RMF delivers 16-bit stereo music via standardized MIDI, actual sound samples, and "custom instruments," making for a compact sound file that can deliver CD-quality sound. Headspace claims that RMF lets an Internet user interact with the music as it plays, for entertainment, advertising, and education. We'll cover Headspace Web audio in detail in a future article.

Beyond background

Of course, instead of inflicting your choice of background sound on your Web-page audience, you can let them choose to play certain sounds. Maybe you'd like a visitor's mouse to trigger playback of a voice message, or you'd like a certain sound effect or section of music to start playing back when the visitor's mouse cursor "rolls over" a particular on-screen object. The next article in this series deals with complexities of incorporating these audio-based actions into your pages. According to NetObjects Fusion technical support, audio-based dynamic HTML "Actions" can be unreliable, given some lack of conformity among the different audio browser plug-ins, which we list below. For more info on Fusion's audio Action features, see HeadSpace's Beatnik Action Set for Fusion.

Plug-ins

As you get rolling with sound on the Web, you'll want to start experiencing the potential of different audio formats and install some of the existing audio browser plug-ins. Here's a list to get you started.

Beatnik Player

Plays Headspace "Beatnik" RMF audio files, with special interactive controls for modifying their sound as they play back.

Compatibility: PowerMac: MacOS running Netscape 3.01
or higher with SoundManager 3.1 or higher installed.

Pentium-class PC (90 Mhz or higher recommended) running Netscape 3.01 or higher.

An Internet Explorer version may be available by the time you read this.

Maczilla, Knowledge Engineering

Plays MIDI, WAV, AU, and AIFF audio, plus MPEG and AVI audio/video.

Compatibility: MacOS running Navigator 3.0 or higher.

MidPlug for XG, Yamaha

Plays MIDI files, either through sound-card or external MIDI-compatible synthesizer, or via built-in Soft Synthesizer with 128 General MIDI-compatible voices

Compatibility: PowerMac or Pentium PC running Navigator 3.0 or Internet Explorer 3.0 or better

Liquid Music Player

Plays streaming Liquid Audio files of CD-quality music tracks and CD albums, using exclusive Dolby Digital technology. Lets you view album graphics, lyrics, and liner notes. Includes personal music library management and the ability to record downloaded music onto CD-Recordable discs.

Koan Music

Plays MIDI-based files from the wide Koan music library.

Compatibility: PowerMac running Navigator 4.0

PC running Navigator 3.0 Internet Explorer 3.0 or better

RealAudio, Progressive Networks

RealPlayer provides live and on-demand streaming audio and video content on the Web. You can try out the free basic RealPlayer G2 (Windows), or RealPlayer 5.0 (Macintosh--a G2 beta is also available), and spring later for the $29.99 "RealPlayer Plus G2," with enhanced audio-video quality and controls.

Compatibility: Navigator 3.x and Internet Explorer 3.x, or better, Mac and PC.

About the author

Bob Weibel is a contributing editor for Publish magazine, and publishing adviser columnist for Computer Currents magazine.
 

Illustration: EyeWire, World of Communication.