3 Quick Tips to Remember when using Audio in Web Design

by Saul Edmonds
iphone ringtones-web.jpg

An acknowledgment of ‘bandwidth issues’ should not prevent designers from utilising audio in a majority of web projects.


  • Richer forms of content provide many benefits - not the least of which is enhancing the user experience.
  • Richer content is particularly relevant when viewing the internet upon mobile devices, all of which feature excellent audio capabilities.
  • Many websites are ostensibly improved when audio is meaningfully integrated into the design concept. But how to use it effectively and minimise any potential bandwidth constraints?

Read on for 3 quick tips when using audio in web design.

1. Ensure your audio can play on as many web browsers as possible.

There are several ways to embed a sound in a web page. Some are better than others.

Flash makes it easy to embed audio in a way that works with most browsers. Yet, browsers such as Safari on the iPhone and iPad don’t support Flash at all. HTML5 features the new audio element This allows you to embed an audio file in a web page and control playback via JavaScript. In addition, it doesn’t require any plugin and works on most modern web browsers.

2. Stay alert to file sizes and optimise your audio files.

For bandwidth savings, don’t automatically download audio files until requested.

3. Don’t auto-play - play only when a link is clicked. This respects visitors who may not want to hear music at that time.

Audio is a great addition to your next web project.

Consider this - the most effective communication always involves both sight and sound.


by Saul Edmonds