Designing with Sound

Designing with Sound

n this section, we discuss sound as a design element, and we explore some of the issues and considerations regarding sound on your Web site.

  • The Audio Experience considers audio as part of the experience of your Web site.

  • Different Sounds for Different Sites explains why you need to consider the type of site, before you consider the type of sound for the site.

  • Creator Considerations discusses what you need to think about when incorporating audio into your site.

  • Reader Considerations discusses how to design for different types of users.

The Audio Experience

What would Halloween be without the music?

Think about the last time you watched a horror movie. People in horror movies are always doing stupid things?like walking down the steps to a dark cellar, right after they watched something run down there, or opening a door that mysteriously slammed shut a few minutes ago.

The next time you rent a horror movie, turn the volume down on your TV. Chances are those once frightening or suspenseful scenes will seem silly at best.

Much of the suspense and drama for horror movies?in fact, all movies?is derived from the background music. We anticipate the danger after we hear squeaky doors slamming in a movie, making an automatic association with creepy sounds.

Sound imparts atmosphere. And its influence can be everything from the only redeemable quality in a movie to a subtle background enhancement.

This goes for Web sites as well. Sound imparts a whole new level, and a whole different atmosphere.

When you type, you hear the clicking of each key as you press down on it. When you hit a button in the elevator, you also hear a clicking noise. Without these sounds, you wonder, “Did I press that? Did I type that word?” Every time you turn your computer on, you hear a welcome sound. Sounds let us know that something happened. With Web sites, sounds can let readers know that they clicked on a link, or that they came to the right page.

Sound can help describe your content, or intensify the meaning of your Web page. Think about how much impact a site on poetry could be if you heard the author actually reciting their poetry. Sometimes poetry takes on a whole new meaning once it’s spoken. Imagine putting a picture of your newborn baby on a homepage devoted especially to her?and listening to her coo as you mouseover the picture.

What would a Web site on a musician be like if you couldn’t hear any of their music? Adding sound clips to a site on musicians helps readers understand who the musicians are and what type of music they play.

Some sites seem boring or bland without a lot of sound?and others work with a simple audio logo, or sounds when you click on links. Sounds can add drama and experience to Web sites. Adding powerful sounds to powerful graphics can intensify a readers experience and help readers grasp what you’re trying to say.


Different Sounds for Different Sites
How scary would Michael Myers appear if every time he appeared in “Halloween” he were accompanied by Tchaikovsky’s “Swan Lake?” Not very, although it would add an interesting twist.

If you were looking at a Web page on childrens toys, and Marilyn Manson was blaring in the background, would you stay at the site, or would you leave? Most people shopping for children’s toys would be shocked to hear loud rock music playing in the background.

Consider the message your Web site is trying to get across before you choose your sound. You want the sound to blend with the rest of your site, not conflict with it. Put as much effort into choosing your sound as you would your pictures and your words. You probably wouldn’t opt for a pink and baby blue background for a cyber-cafe site; so why have some gentle feedback sound when a sonic boom might be better matched?

Let’s say you’re working on a Web site that displays final art projects for a fine art grad school program. As part of your site, you’d like to include some music. You’ve decided on a really excellent “Devo” song. (Remember that you’ll need to get permission from either the artist or the record company before you use song clips from bands, but that’s something we’ll discuss in a later section).

Your goal is not to have your audience bouncing around and singing “Whip It;” your goal is to enhance the works of art and add to the experience of the Web site.

Consider having a few seconds of the song you choose play as your page is being loaded?or every time you mouse-over or click on one of the images. Brief exposure to music may be all you need. Overwhelm your visitors with Devo and they’re going to wonder?is it a page on 80’s music, or on art?

If you’re building a site on a local garage band, the site may feel barren without sound clips. Consider putting a dozen sound clips on the site, or have one of the bands songs play as the page loads.

And always consider what type of environment most of your readers are in before choosing sound. If your reader is in a corporate environment, they may not appreciate sonic booms booming from their speakers.

Use sound with your site, not against it.

Creator Considerations

In this section, we discuss what you need to consider before putting sound on your site.

When using sound on your site, you need to think about your readers. You need to balance file size and file quality, make sure your readers know how to stop or otherwise control the sound, and you need to address how long it’ll take for readers to download the sound.

    File Sizes
  • Make sure you don’t compress your files to the point that you lose the quality of sound you’d like your readers to hear.

  • Keep embedded sound files as small as possible, unless you know your entire audience has a T1 connection. Sure, your dramatic narration of last summer’s vacation is fascinating–but few people would be willing to wait 20 minutes to listen to it.

  • Warn readers about how long it’ll take to download. Letting people know whether they’re in for a 45 second wait, or a five minute 45 second wait may save you from getting a lot of hate mail–or simply reducing the chance of people going elsewhere.

    Sound Control
  • Make sure your readers can find the sounds easily and detect them as sounds.Give readers directions for hearing sounds or downloading sounds.

  • Keep sound controls out in the open. Readers will want to know how to play the sound, stop it, replay it, or change the volume. Listening to Devo at full volume may be your greatest thrill, but it could really annoy some of your readers. One person’s “too soft” is another’s “blaringly loud.”

  • If you’re using streaming audio, do you have a link for downloading the audio player? If you’re using plug-ins to play back streaming audio on your site (vs built-in plug-ins), include a way for readers to obtain the necessary plug-in, such as a link to the plug-ins download site.

Reader Considerations

You need to think about the person who is viewing your page?where will they be and what type of equipment they have. Remember?your audience is your most important design consideration.

Reader’s Environment
Think about where your reader will be when they check out your site:

  • Will they be at home?
  • Will they be in a cybercafe?
  • Will they be in the office or cube?

Sound has different effects in different environments. While most Web pages sit quietly on a readers screen, sound-enhanced sites scream out “I’m here!” This may startle a reader at home, but for a reader at work, it may prove to be embarrassing. If your reader is checking out your page while in the office, a loud announcement such as:

“Welcome to surfers world. Suurffffffs Up!” might be an unpleasant surprise?especially if the Web surfer hoped to check out the waves quietly (and invisibly) during a lull in the work day.

Many people don’t expect to hear sound blasting forth from their computers?but they might expect it with WebTV. If you know you’ll have some readers working on a corporate PC and others on WebTV, consider incorporating a JavaScripted browser detection routine to deliver a sound-enhanced version that takes advantage of WebTV’s excellent sound playback capabilities, and another that delivers a version more appropriate for the PC in a group setting.

Reader’s Equipment
We know that you, the creator of this fine sound enhanced page, have the world’s greatest computer, the best speakers in the world and your own personal T1 line, but that doesn’t mean that your computer and your equipment are the only ones you need to consider.

  • Think about what platform your user will use to view the page, and test your sound files appropriately. PCs and Macs play sound differently, so be sure to test sound files on both. Also, different sound files can yield different results.

  • If you’re using midi files, what sort of midi interpreter is your reader likely to have? Think about what kind of plug-ins, if any, your readers are likely to have installed for playing back sound. Always incorporate a way for your readers to get any plug-in you’re using.
  • Also think about the type of speakers your readers have on their computer. Test sound files on computers with built-in speakers that came with the computer, as well as high-end professional speakers.

Reader Expectations
Think about who your reader is and what type of sound you think they expect. If you’re addressing musicians, you’ll make different sound decisions than if you’re addressing Joe Consumer.

Bandwidth impacts both sound and the quality at which that sound can be delivered. In reality, any connection speed lower than 28.8 can feel painful for anything but very, very small sound files.

You know those home pages where 15 separate pictures, at 60kb a piece are scattered about the index page? The page takes forever to download, and it usually isn’t worth the wait. You can easily make the same sort of mistake with sound files. Don’t.

If you know your target audience has T1 connections, your sound decisions will be different than if your target audience consists of dial-up users on 14.4 modems. But as a general rule, keep your file sizes as small as you can, without dramatically effecting the sound quality.


About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist