Menu

Blog. Take a look around and join the conversation.

Audio – Using it wisely in a Web app

HTML 5

Imagine a scenario where your client has made a last minute request that sound be added to his web app.  He wants you to create a sound that would notify a user when their photo has finished uploading.  What do you do—do you try and talk him out of it, or do you implement the sound skillfully by asking key questions that help you determine the best use of sound in this instance?

It is a fact that sound in web applications is very important–and in a non evasive way—can work well. Think about your favorite app, how do you know, for example, that some requested action has been completed—it is normally through an audio-visual clue.  A camera app on a phone, for example, will most likely have a sound of a mechanical shutter to indicate that a picture has been taken.  And with the arrival of the <audio> tag in HTML5, flash has been eliminated from the equation, as sound can now be produced natively in the browser with zero lag, Essentially, sounds are now produced much like visual images in CSS3.

According to Stuart Memo, the creator of Web Audio API,  there is a list of 5 things you should consider when considering your customer’s audio request:

  1. Is It Necessary: Web Designers should use sound only if it greatly reinforces or clarifies an important message to the user—not just for the sake of using a cool sound;
  2.  Environment: An important consideration that could easily be overlooked, is where will the app most likely be used—in environments that are noisy or quiet?
  3. Is It Annoying:  If your application’s sound is annoying or obnoxious, it is not very likely that you will have a lot of repeat visitors.
  4. To ensure against driving customer’s away with ones audio track, there are a few things to consider:
    1. make the sound short—less than a second is the goal;
    2. make sure that the sound is harmonic and pleasant to listen to;
    3. only repeat the sound if it is absolutely necessary;
  5. Performance over quality: Because high quality audio files can be larger than some jpeg images—it may be necessary to use natively created effects than large audio files. 

If done well, audio can enhance even the dullest of web apps, and can improve the overall experience and enjoyment of the site—but the sound must be directed with a particular purpose and goal to accomplish.

Author: My name is Kevin Lee and I am a Web Design & Development student at Francis Tuttle. Follow me on Twitter and check out my portfolio!

There are 2 comments. Add Yours.

Sherri Gleaves —

Nice blog post! I really enjoyed the five considerations list. And, I think you are accurate when you consider/decide to try and talk your customer out of their decision versus making it work effectively for them because, after all, they are the customer!

Reply »

Dana Myers —

Great job–good things to consider!

Reply »

Share Your Thoughts!