HTML and CSS Reference
Verbal Communication: Tips for Effective Web Audio
Enhancing your Web site with audio clips can be an effective way to provide information
and entertainment for your users and customers. However, it must be used judiciously to
avoid annoying users. Here are some tips to keep in mind when using Web audio:
• Avoid background music. Remember that many customers multitask when using the Web
and are often listening to their own music and audio files. Don't annoy them by inserting
your audio clip over theirs.
• Give users control. Turn off the autoplay feature of your audio player. Let each user
choose whether or not to play your audio clip.
• Provide a mute button . Your users might be accessing your site at work or in a public
place where audio is inappropriate. Always give users the ability to pause, stop, and—
above all—mute the audio.
• Download on demand. A page that is slow to load often will be skipped. Don't slow the
loading of your Web page by automatically downloading sound and video files. Download
them when a user clicks on the player and not before.
• Keep it short. If you use sound to supplement different visual effects in your Web page,
keep the clips short in duration. Don't force your users to listen to long clips.
• Use the right frequency. The human ear hears sounds in the range from 1 kilohertz to
5 kilohertz. Keep your audio clips in this frequency range for the most effective playback.
• Accommodate hearing-impaired customers. The Web is an important source of informa-
tion for the hard of hearing. Always provide alternatives for those who can't hear your
site's audio content.
Finally, every feature on your Web site, including sound, should have a reason for being
there. An audio clip should provide users with important information that cannot be con-
veyed in any other way. Don't add sound simply to impress your users. In the end, they will
be more interested in the site's content.
Working with Embedded Objects
Older browsers that don't support the HTML5 audio element instead rely on plug-ins to
play embedded media clips. To insert an embedded object such as a media player, you
can nest the embed element
<embed src=” url ” type=” mime ”
width=” value ” height=” value ” />
within the audio element, where url is the filename and location of the media clip, the
type attribute indicates the type of media file, and the width and height attributes specify
the width and height of the embedded object in pixels, respectively. For example, the follow-
ing code creates an embedded object for the overture.mp3 file that is 250 pixels wide by
10 pixels high:
<embed src=”overture.mp3” type=”audio/mpeg”
width=”250” height=”10” />
Notice that the embed element is nested within the HTML5 audio element. Any
browser encountering this code will first attempt to load the audio clip via the HTML5
audio element; but if the browser doesn't recognize the <audio> tag, it then will attempt
to load the clip using the embed element.