Sound on the Web - the invisible other half

Written by Simon Mills on 4th April 2013

(Last updated 23rd November 2016)

Consider your favourite film, but with no soundtrack. It would be strange right? Those long periods between dialogue filled with silence. Most of the time however, those gaps feature mood enhancing incidental music, a brooding scene-setting piece or a sting to emphasise the narrative tension. When sound is there, we often don’t notice it; but when it isn’t, we do. Music and sound are an essential part of the picture.

If sound is such a key element in making an emotional connection with the viewer, why do we not have more sound on the web? Should you be taking advantage of sound to enhance your site and user experience?

As an audio designer and a web designer, I’m always seeking to come up with new ways of combining the two mediums and skill sets. This is a contentious topic with many pros and cons, this article aims to explore some of them...

The common pros & cons of using sound on the web

The use of sound on websites is a contentious subject with some users finding sound intrusive, annoying and potentially embarrassing - audio distractions can prove inappropriate in both open plan and shared offices. It’s probably happened to all of us at some point: happily browsing the a web page and suddenly music blares from your speakers...Not good.

On the other hand, other users find sound and multimedia to be an engaging way to make your site more ‘active’ or alive. Adding that extra sparkle and dimension to your pitch; beyond the flat and static. The bottom line here is knowing your audience.

Here are some of the key pros and cons to using sound on web sites:

Pros/Opportunities:

  • Accessibility:  sound can provide cues or confirmation to users with disabilities.
  • Alerts: sound can be used as a useful notification tool when visual cues are not available.
  • Enhancement: sound can add that little extra dimension to a site and provide an enhanced Web experience.
  • Emotional connection: sound can elicit an immediate emotional response – it can help influence and excite the viewer and drive them to action.

Cons/Dangers:

  • Irritating: forcing that sound to come out of users’ speakers is borderline rude.
  • Overuse:  if every button or link makes a sound it quickly enters irritating territory.
  • Unknown quantity:  not knowing the users’ sound capabilities and therefore how best to use them e.g. there is the assumption that the user will have sound turned up.
  • Perceived as superfluous: some users feel that it doesn’t serve any purpose, and could be an unnecessary in page download size.

Questions to ask yourself when considering adding sound to your site:

  • Context - Is this appropriate for my audience? Would they enjoy this?
  • Can sound be used to fulfil a purpose or solve a problem on my website?
  • What sort of sound is best? Videos? Background music? Functionality noises?
  • Will my audience have choice to turn the sound off?
  • Will this inhibit the functionality of the website?

Great examples of Web Audio

What I wanted to do was present some great examples of web sites where sound has enhanced the user experience. I put these examples together to demonstrate the potential that is available right now and into the future.

It’s worth bearing in mind that a few of these only work on the Google Chrome browser, but cross browser compatibility will come soon, when the other main players catch up.

The Build

A cool, media rich site for a bunch of motorbike heads in Portland, Oregon.

  • A great example of using sound to create atmosphere.
  • Also employs HTML5 to display fullscreen background video on desktops.

Find Your Way To Oz

A lovely promotional microsite for the new film.

  • Chrome only - it’s a ‘Chrome Experiment’ currently, but at least it demonstrates what will become a standard in all browsers in the not too distant future.
  • Use of Web Audio api to place music, atmospheric wind and other sfx in a 3D space that really enhances the experience.

The Wilderness Downtown

Promotion for Arcade Fire’s 2012 LP.

  • Chrome only - liberal use of HTML5 combined with Google Maps that turns your screen into cinematic multimedia exhibition.
  • Audio is used to create a cohesive immersive experience.

Interactive Networked Web Audio Experiences

Musical toys for the masses.

  • One can experiment with these by oneself...or harness the inherent strength of the internet and collaborate with others.
  • Some nice user interface design courtesy of the <canvas> element.

Radiophonics Workshop

Recreate the lost sounds from the BBC Radiophonics Workshop...in your browser.

  • Proof of concept - this Web Audio actually works!
  • Good educational examples on synthesis to boot.

The Peanut Gallery 

Create your own intertitles to silent film.

  • uses Web Audio API for voice detection to text.
  • demonstrates potential for improving Accessibility online and transcribing spoken word.

Soundcloud

Music and sound sharing on a social scale. Record the sound and share it.

  • Leverages HTML5 to create a cross browser/cross device experience that degrades nicely for users of older browsers/technology.

Facebook - notification sound for when you have a new message on Chat.

Skype - connection/disconnection sounds.

Conclusion

Exploring this extra dimension could be one area of key value when designing the user experience on your site. It could be the secret ingredient to differentiate you from competitors and stand out from the crowd.  Sound can give you a uniquely direct link into a customer’s/users brain, but implementing it correctly can be challenging. Make sure it is meaningful and you are doing it for the right reasons; have a clear strategy and bullet proof plan of action.

In the next installment of Web Audio, I’ll be exploring how our interaction with the Web is transforming: from web sites to fully fledge web apps and games, powered through use of HTML5, Web Audio and Web GL api technology highlighted in the above examples.

If you know of any great examples of the online use of sounds please get in touch, we’d love to hear about them.

This article was posted in Development by Simon Mills