home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeDesigning Web AudioSearch this book

1.7. Designing web audio

The best way to start designing web sound is to ask some basic questions. Once you've formulated your answers, you can make some concrete decisions about which tools to use to solve problems and meet project goals. Here are three things to consider in planning your sound design:

In addition, answering these general questions before you start will help you avoid future problems:

  • Will the web site audience have either slow analog modems or faster DSL, cable, or T1 connections?

  • How much will you need to compress your audio to meet the bandwidth target?

  • Which is more important to your audience: higher quality sound files or shorter download times?

To hear the quality of your final sound design, test the delivery machine or platform that represents the lowest common denominator. Make sure your audio sounds good over the Web and not just on your studio monitors. It is always more costly to change your soundtrack or fix mistakes at the end of the project. Don't get caught having to tell the producers that the great audio they have been hearing will not work in the final product.

Always save high-quality masters

Capturing the highest-quality source audio will improve the final output quality of your web audio, even for 8-bit sound over slow modem speeds. If you're preparing audio for low-bandwidth formats, remember to save your high-quality 44.1 kHz, 16-bit original master copies. Then when bandwidth over the Internet increases, you can re-process your original audio with the higher quality formats.

Three types of sound can be incorporated into a web site:

1.7.1. Easy-to-use narration

Narration is one of the most popular applications of web audio because it is straightforward, easy to use, and provides a dynamic source of information and entertainment for your audience. Visitors can click on a button and listen to audio while they continue to read the rest of the web page. A small link to a streaming narration audio file can be unobtrusively placed to the side of a text column or below a picture caption. Figure 1-1 illustrates how a popular news site uses narration to enhance its text content. If users do not have the appropriate plug-in or do not wish to listen to audio, they can easily scroll past the audio link without disrupting their viewing experience. You can also offer a simple HTML page slide show with narration, graphics, and text.

Figure 1-1

Figure 1-1. The CNN site featuring narration

Five web sound design mistakes to avoid

  • Using audio incessantly without silence or pauses. If you use loops, give people's ears a rest every few pages. For instance, leave audio off the home page or fade your loops out after 15 or 30 seconds of playback. Give visitors a break from the soundtrack every time they come back to the home page. In Flash, you can specify the exact number of times a sound file loops and the rate at which it fades out.

The downside to using narration in the form of real-time streaming audio is that it may require dedicated servers, special software, and user licenses. As opposed to short sound effects and music loops that download in a few seconds then quickly play back, narration or voice clips are much longer in length and need to be broadcast in real time. Streaming to large audiences of several hundred or thousands of listeners simultaneously requires intensive bandwidth and infrastructure. If you are broadcasting to only a few hundred listeners per day, you can get away with much simpler and cost-effective solutions. For example, RealAudio's Basic RealServer will run on the same web server that serves up your web pages. See Chapter 6, "Encoding, Serving, and Streaming Sound with RealAudio" for more information. Capturing narration

Unlike ambient loops and sound effects, capturing high-quality narration is more a matter of practicing good general recording and editing techniques than of using special fade effects or seamless looping tricks (for more about recording, see Chapter 3, "Capturing Original Source Material"; for more about editing, see Chapter 4, "Optimizing Your Sound Files"). The quality of streaming audio is determined by two factors: the condition of the source audio prior to encoding, and the compression format or encoding scheme used to encode your audio files for web delivery. If you start with low-quality audio source material, you will get poor results regardless of the speed of the users' modems or the compression format. As a web developer, you may not be able to discern your potential audience's bandwidth capabilities, but you can ensure that your audio source material is set to the proper volume level and is free of distortion and background system noise.

As we'll explain in Chapter 5, "Introduction to Streaming Media", the amount and form of compression used to encode your source audio greatly effects the quality of the end sound. In contrast to text, audio eats up enormous amounts of bandwidth. A one-minute sound file can easily exceed the amount of digital information needed to reproduce an entire novel. In order to reduce the file size and bandwidth requirements of your audio files, encoding schemes and compression formats discard small pieces of digital information that represent the sound. As you might expect, this process degrades the sound quality. The amount of degradation is equivalent to how small you need to make the sound file to fit your bandwidth constraints. Some audio formats such as MP3 do a better job at compression than other formats such as AIFF or RealMedia's original audio compression scheme.

What is foley?

Foley is the art of providing audio realism to visuals in post production. The Foley technique is named for Jack Foley, a sound editor at Universal Studios, who was one of the first film artists in the early 1950s to specialize in the new field of adding audio to silent film reels (http://www.marblehead.net/foley/jack.html). Foley sounds are often the first sounds added to a film soundtrack and generally include footsteps, sounds of the actors clothing, and prop movements on the screen such as a closing door or an object falling to the floor. Foley artists perform in a recording room, making sounds and noises with various objects to simulate the sounds of the action on screen. A classic example of a favorite foley technique is to hit a plump cabbage in front of a microphone to simulate the sound of a fistfight.

1.7.2. Using sound effects

Sound effects are generally short, interface-oriented audio clips triggered by user action. Button sounds make it easier for people to navigate your web site. An audio cue, in addition to a graphic button, adds another sensory dimension to your web page.

Sound effects can also be used as short audio clips synchronized with animation. An animated intro screen or home page with audio pulls people into your site. Sound effects are a great way to engage your audience and get them interested in your site's content.

Sound effects should be relatively short in length so they can download and play back quickly. Lengthier sounds take too long to download and should be incorporated into a site as a streaming narration or a music file. Figure 1-2 shows a typical button sound just over a second in length. Notice the quick fade-in and immediate rapid decay.

Figure 1-2

Figure 1-2. A one-second button sound effect

The color of sound


Walter Murch, the father of modern sound design and the creator of the soundtracks for such legendary films as The Godfather and Apocalypse Now, describes the basic components of sound design, the term he originated in the early 1970s.


"Sound is analogous to light and the color spectrum of a rainbow," says Murch. "At one end of a rainbow you have violet and at the other end you have red. At the violet end you have sounds that convey a high degree of information such as speech and dialog. At the opposite end you have infrared sound such as music, which has little code, language, or specific meaning, but tons of emotion and an unrivaled ability to communicate mood to the audience."


However, Walter points out that "in the real world, sounds rarely ever fall clearly into one category or the other. There are elements of language that work their way into music, and by the same token, there are elements of music that work their way into the cadence of the spoken word. In between the two is this rather vague middle area of pure sound: it's not dialogue or speech any more, nor is it really music. This middle area that comprises the vast majority of film sound is known as sound effects and foley." So when it comes to web audio, don't limit yourself to simple narration and background music. Get more creative and use sound effects to add another layer of richness to your interactive web content.

Figure 1-3 shows an example of a sound effect used for a Flash intro screen. The sound is just over four seconds in length. Notice the more gradual fade-in and fade-out. The sound file has two peaks in volume that correspond to events in the animation. The volume peaks of both the intro and button sounds have been normalized or raised to reach just below the maximum volume level. By using the full dynamic range, you get higher quality audio playback. For more information about digital audio basics and enhancing your sound files, read Chapter 2, "The Science of Sound and Digital Audio" and Chapter 4, "Optimizing Your Sound Files".

Figure 1-3

Figure 1-3. A four-second intro sound effect used for an animated Flash site

Time-saver tip

You can often recycle segments of existing sounds, such as a music loop, to use as shorter button sounds. This trick saves time and gives consistency to your web site soundtrack.

1.7.3. Designing music loops

Music on the web is found in three forms:

For purposes of designing web audio in limited-bandwidth environments, this chapter focuses on creating great music loops. Since web sound design relies on bandwidth-friendly techniques, short catchy loops that do not become monotonous or get on your nerves are the sounds you want to hear.

There are many techniques and tools for creating seamless loops. If you create loops frequently, it is worth investing in the software. Infinity Looping Tools for the Macintosh by Antares Systems automates many of the painstaking steps of building seamless loops in a standard sound editor. Bias Peak is another audio editing application that features many looping tools. If you are a Windows user, try using the Sound Forge Acid looping tool or Cool Edit.

Sound effects libraries


The sounds depicted in Figure 1-2 and Figure 1-3 earlier in this chapter were taken from The Hollywood Edge "Premiere Edition" sound effects library (http://www.hollywoodedge.com). The web site for this book, http://www.designingwebaudio.com, contains 80 royalty-free sounds from The Hollywood Edge collection. You can purchase high-quality, royalty-free professional sound effects packages from $50 to $100 for a 90-minute CD or up to $1,000 for an entire collection. Professional effects packages are used by sound designers because their sound quality is high and because they contain many variations of similar effects, such as a storm sound effect with rain and one with rain and thunder.


For a low-cost alternative, you can download audio clips from a variety of web sites that provide free or cheap sound effects. A few are listed in the buyers guide in Appendix A, "Creating the Ultimate Web Sound Studio: Buyers Guide and Web Resources". Keep in mind that you get what you pay for: cheap sound effects packages generally contain less variety and poorer-quality audio files with more background noise and other glitches than do high-end packages.

Background audio loops convey emotion and create mood, and they are most effective when they do not overpower the text and graphics on your web site.

A good loop sounds as if it were being randomly generated over time instead of repeating over and over. The trick to making a good background loop is to recreate the same auditory experience someone would have walking in the forest or along the ocean or listening to a music recording. This effect, also called sonic realism, is difficult to achieve in limited-bandwidth environments using two- to four-second loops. Sonic realism is much easier to achieve in a high-bandwidth environment with six- to thirteen-second loops. Three factors that help build this sense of realism are good mixing, optimum loop length, and seamless loops. Optimum loop length

The key to a successful sound loop is to create the shortest loop possible that still sounds dynamic and random. If the loop is too short, you will recognize the start and endpoints, making the repetition more noticeable. Longer loops allow for greater intervals between distinctive noises, which creates the illusion of infinite sound. If you make the loop too long, however, it will require too much bandwidth.

In our experience, the optimum loop length is between 10 and 13 seconds, depending on the type of sound you are looping. That length is just long enough to create the impression that the loop is an infinite background sound, as shown in Figure 1-4.

Figure 1-4

Figure 1-4. Optimum loop length of 13 seconds

For certain web applications or page-size constraints, you may have to compromise and make loops shorter than an optimal 13 seconds in length. In fact, if your target audience is using 33.6 Kbps modems, you will be limited to two- to four-second sound loops. If you have to create shorter loops, keep the mix simple by using fewer ornamental sounds and more synthesizer drone sounds, or incorporate rhythm, a naturally repetitive sound texture.

By incorporating a percussion rhythm or short melody in your ambient loops, you can produce a two- to four-second loop that sounds intentionally repetitive or musical. If you use music or rhythm, make sure the loop lines up on the start and endpoints of one complete rhythmic pattern, as discussed in Section, "Building seamless music loops" later in this chapter. It is easy to visually spot where loud percussion hits appear on your waveform-editing screen when you audition your rhythm track. Locate the first beat, such as from a snare or kick drum, and the point where it next repeats in the cycle, then select the area in between the two points to capture a seamless rhythm loop.

One of the best ways to embed a loop into your web page is to use an audio file with a transparent Shockwave movie. (Note that you can use Flash in the same manner.) Attach the Shockwave file to a frame. Place the content of your web pages within the frame. Now the loop will play back continuously across any pages placed within the frame.

The main advantage to embedding Shockwave in frames is that if some visitors do not have the plug-in, they won't receive an error message; the loop simply will not play. Shockwave lets you set many of the parameters directly into HTML pages, including the loop mode, which specifies that a browser keep looping the SWA sound file.

For an average web site with four main sections containing four subcategory pages each, create a frame for each main section. Embed the subcategory pages within a frame. By using four separate frames, you can play different ambient loops for each section. By using several loops, you avoid the monotony of having one sound playing throughout the entire site. To create silence and a break from the ambient loops in the rest of your site, do not place a loop on the home page. See Chapter 5, "Introduction to Streaming Media" for a step-by-step guide to using Shockwave loops. Sound loop tutorial: creating seamless loops with a sound editor

The goal of producing seamless loops is to cross-fade the overlapping endpoints of your audio file so they blend perfectly. Imagine bending a straight piece of metal into a circle, welding the ends together, and sanding down the rough edges until it is impossible to feel the two endpoints in the circle. That's what we're trying to do with a seamless loop.

Sound loops

Great loops are the key to a good web soundtrack. Getting short catchy loops to seamlessly repeat takes lots of practice. Infinity Looping Tools (http://sales@unityaudio.co.uk) is a simple, well-designed application that eases the process of creating seamless loops.

Making a sound file loop is easy. Making the loop seamless is not. Here is a step-by-step walk-through of one of the more popular methods of creating loops in a standard multitrack sound editor:

  1. To make an ambient loop, download the sample file from http://www.designingwebaudio.com/, shown in Figure 1-5. (If you are making a music loop or a loop that has a distinctive continuous rhythm, such as an undulating synth drone or drum beat, quickly review this section and then proceed to Section, "Building seamless music loops".)

    Figure 1-5

    Figure 1-5. The waveform of a mono sound file imported into a Pro Tools session

  2. Select approximately two seconds of the last portion of the audio clip as shown in Figure 1-6. After you have made your selection, leave the two-second portion highlighted.

    Figure 1-6

    Figure 1-6. A two-second selection at the end of the audio region

  3. Zoom in close. Hold the Shift key down and modify your selection so that the left end of the highlighted region starts at a zero point on the waveform, as shown in Figures Figure 1-7 and Figure 1-8. Then your highlighted selection on the right part of the audio region should simply go to the end of the sound file. Making your edit point at the zero point is the best way to avoid pops and glitches at the beginning of your loop. This rule of thumb pertains to all digital audio editing. With stereo files, you may have to compromise when trying to locate a zero point on both tracks.

    Figure 1-7

    Figure 1-7. A close-up of a proper edit selection

    Figure 1-8

    Figure 1-8. A sample view of a selection made at the zero point of the waveform

  4. Once you have your selection, cut and paste it to a new track as shown in Figure 1-9. Make sure it is placed at the very beginning of the track.

    Figure 1-9

    Figure 1-9. The original audio file with the last two seconds cut and pasted into audio track 2

  5. Set the volume parameters of your cross-fade as shown in Figure 1-10. On the first track, set the fade-in diagonal volume points at 0% to 100% volume over the two-second overlapping portion of the audio clip. On the second track, set the volume points of the fade-out at 100% to 0% over the portion of the clip. Now select the top audio clip and listen in loop playback mode as shown in Figure 1-11. Often the first cross-fade you set will need minor adjustment. Play with the volume cross-fades until you get a smooth transition with no dips or peaks in volume at the edit points. Note that a "linear" or standard "X" cross-fade will result in a dip in volume.

    Figure 1-10

    Figure 1-10. The volume cross-fade settings for a seamless loop

    Figure 1-11

    Figure 1-11. A sample view of a selection made at the zero point of the waveform

  6. Once you have made minor adjustments to your loop, bounce the tracks to disk. Convert the file to your format of choice and you're ready to upload a professional loop to your web site. You can use this same technique to produce stereo audio loops. Building seamless music loops

In many online projects, bandwidth constraints dictate minimal use of audio. Music or rhythm loops work great when bandwidth constraints limit you to short two- to four-second loops instead of the ideal loop length of about 13 seconds used in higher-bandwidth environments. Generally, it's very difficult to create good ambient background loops such as a soundscape of a forest, city, or peaceful synthesizer in two to four seconds. At that length, the audio tends to sound repetitive and monotonous. Music or ambient sounds with percussion, on the other hand, are naturally repetitive, so they often work well for short loops. Music styles that work particularly well are rap, techno, and "world beat." These styles are repetitive in nature, where the listener expects the music to "ride" on a rhythmic figure. Music that has a lot of melodic or harmonic rhythm (like many jazz or classical styles) does not loop as well because the listener expects the music to develop into other sounds.

If you have an audio clip that has a consistent rhythm such as rap, a percussive instrument, or a pulsing sound, you will need to take extra precaution to select the right edit point. Music loops or rhythmic loops are the most challenging to produce because the component of precise timing adds to the difficulty of making a good cross-fade.

A close look at the digital audio waveform can reveal the phrasing or timing of the music without your having to listen to it. You can often spot repetition in the waveform, which gives you the best visual indication of the start and endpoints of a music loop. Percussion is particularly apparent in a music waveform. For instance, you can see the amplitude from a sharp spike or snare drum, as shown in Figure 1-12. Using the snare drum as a landmark, follow these steps to select a musical measure:

  1. Scan the audio waveform for a distinct pattern of peaks or spikes that correspond to percussive rhythm sounds in the audio file such as a snare drum or kick drum, as shown in Figure 1-12. Listen to the sound to determine if it hits on the same beat of each cycle or measure of music. The idea is to find a one- or two-measure unit of time that makes musical sense when repeated.

    Figure 1-12

    Figure 1-12. A one-measure audio region of a music clip with distinct snare drum patterns

  2. Once you locate the repeating percussive sound in the waveform, make your short (one to two seconds) or approximately one-measure selection point at the precise start of the percussive sound, as shown in Figure 1-13.

    Figure 1-13

    Figure 1-13. A selected region of the second snare drum sound in the waveform

  3. Move your selection to track 2 as shown in Figure 1-14.

    Figure 1-14

    Figure 1-14. The snare drum selection pasted into audio track 2

  4. Select the beginning portion of the audio clip on track 1 as shown in Figure 1-15. Select up to the percussive sound or peak in the waveform that you are using as your start point. In this example, it is the first snare drum hit.

    Figure 1-15

    Figure 1-15. A selection of the unwanted audio region to be removed

  5. Delete the portion of the waveform up to the point of the first percussive sound, as shown in Figure 1-16, so that both the percussive peaks on tracks 1 and 2 line up perfectly. At this point, the audio region on track 1 should be exactly one measure or cycle in length.

    Figure 1-16

    Figure 1-16. Audio tracks 1 and 2 aligned perfectly; audio track is exactly one measure or rhythm cycle in length

  6. Set your cross-fade volume points as shown in Figure 1-17 and bounce the tracks to disk. Now you should have a perfect music loop!

    Figure 1-17

    Figure 1-17. Two audio tracks with appropriate cross-fade points

CD sound versus web sound

Like web sound design, interactive CD-ROM sound design focuses on the use of sound loops and interactive sound effects triggered by scripts that react to user input. The major contrast between CD-ROM and web mediums is that the Web has unlimited storage capacity, but severely limited data-transfer speeds, whereas a CD-ROM has a comparatively high rate of data transfer but finite disk storage limitations.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.