AWF - Enhancing Sites with Audio [LESSON]

Enhancing Sites with Audio

Audio Formatting

What enjoyment would you receive from playing your favorite online game without sound? No joy at all! Audio plays an important role in web design. As a web designer, you should understand how to utilize music, speech, and other audio options to enhance the experience visitors encounter when they access a website you have constructed. In this module, you will explore the issues involved in converting sound into a format that can be played on users' computers and over their internet connections. Common sound file formats for websites will be highlighted, and you will learn how to set the size of the sound clip using the appropriate attribute.

The Advantages of Audio on the Web

In the previous module, you were instructed on how animation and video can be used to provide information and promote a message. The inclusion of those options can attract users to act by purchasing a featured item and/or service or assist individuals as they obtain essential information. Likewise, audio features can be used to make a website come alive.  The items below reflect several benefits of audio enhancements.

While these are great enhancements to inform, assist, entice, connect, and customize, it is important to take into consideration the make-up of your target audience when determining which options to use. You should contemplate how some audio enhancements might be a distraction or cause issues for an individual to access information.

Watch the Considerations for Sound on the Web video to learn more about media formats. 

Audio Formats for HTML 5

There are several audio formats that are available but not all browsers will support the numerous formats. Audio formatting programs can be used to convert the audio file to an acceptable format, however, when coding in HTML 5, it is a good practice to use one of the formats referenced below.

The MP3 format is currently supported by the major browser companies. Because the formatting option is categorized as proprietary, web browser companies must pay a fee to decode the audio. Because of that fact, it may be more beneficial to use a royalty free formatting option since many browsers can support it.  Currently, Safari does not support OGG format. Standards sometimes change so it is important to stay abreast of updates. As a rising web designer, consider visiting the Web Hypertext Application Technology Working Group's website.

Creating Audio for the Web

When adding audio details to an HTML 5 document, the <audio> tag is used to define the sound.  The <source> tag is used to identify the audio files for the browser to  use. The src attribute should be used to reference the audio file you would like played. The location must be a valid URL which will help the web browser identify where to look for the audio file. See the table below for common audio elements and attributes

Common Audio Elements

Element	Attribute	Value	Effect
<audio>			Inserts audio into the page
<source>			Points the browser to the source of the audio
	src	URL	Adds the URL for the audio file
	controls	controls	Adds audio controls such as play, pause, stop, and volume
	autoplay	autoplay	Causes the audio to play automatically when the page is accessed*
	muted	muted	Causes the audio to start playing muted (usually entered after autoplay).
	loop	loop	Causes the audio to start over again when it is finished
	preload	auto metadata none	Causes the audio to be loaded when the page loads according to how the author of the page wants it.

*Chromium browsers do not allow autoplay in most cases.

Watch the AWF Audio video below to learn how to enter audio into your website. 

Web Audio Guidance

Watch the video below on Web Audio Guidance.

 

Digital Rights Management

Web Enrichment Reminder

As a student web designer, it is important that you understand the meaning behind Digital Rights Management.   As you create websites, you may be tempted to use media files that you did not create; do not forget to seek permission from the owner of the work or access websites like Creative Commons to locate files that can be used within the guidelines established by the owner of the work.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION