Audio in HTML5:

Similar to the <video> element, the <audio> element allows developers to add an audio player to webpages.

Attributes

The <audio> element accepts a number of specific and unique attributes.

source

The source attribute (src="") provides a URL (relative or absolute) to the audio file.

controls

When the controls attribute is supplied it indicates the browser should supply its own controls for playback. If you do not use this attribute, no controls will be shown by default.

autoplay

When used, this attribute specifies that the file should play automatically.

NOTE: Remember, this is considered poor-practice, and in most cases, it is better to let the user choose whether to start the audio or not.

preload

As with the <video> element, this attribute tells the browser what to do when the page loads. It can have one of three values:

• none - The browser should not load the audio until the user presses play.
• auto (default) - The browser should download the audio when the page loads.
• metadata - The browser should just collect information such as the size, first frame, track list, and duration.

loop

This tells the browser whether or not to loop the audio.

Browser Support and the Source Tag

Notice that the <audio> element is not an “empty element” and requires both an opening and closing tag. This serves a number of purposes, but the most important is that the developer can include content between the tags that will be displayed or called in the case that an end-user’s browser does not support the <audio> element or audio file format.

You should always include extra markup inside the tags for this potential case.

<audio src="">
    <p>This browser does not support our audio format.</p>
</audio>

Audio

Best included self-hosted audio formats:

• .mp3: Good quality for file size, but proprietary.
• .ogg: Open-sourced.
• .wav*: Lossless, but larger files.

There are many file formats that audio files can be rendered to. The most popular and well known is likely .mp3.

This is because the compression achieved creates smaller file sizes without comprising audio quality too greatly. However, .mp3 is technically a proprietary format, and as such, some people are hesitant to use it.

If you find yourself working for an audio-based client, they may also have strong opinions about what file types they want prioritized. For example, they may want to use .ogg as this is an open-source based audio format.

Your clients may also insist that you include lossless or uncompressed audio file formats such as .wav, .aiff, or .flac.

Attributes

When using more than just .mp3 you should include multiple versions of the file, with decreasing preference. This allows the browser to then use the file format that it supports.

src

This can be done by omitting the src="" attribute from the <audio> element and instead using a separate <source> element inside the parent <audio> element.

The <source> element is an empty element, and accepts the src="" attribute to provide the URL to the browser.

Altogether Now

<h2>Smooth Sounds for "Puppy" Video</h2>
<audio controls>
    <source src="../media/duckett-audio.wav" />
    <source src="../media/duckett-audio.flac" />
    <source src="../media/duckett-audio.ogg" />
    <source src="../media/duckett-audio.mp3" />
    <p>This browser does not support our audio format.</p>
</audio>

{ TODO: }

Read pages 217-223 of Chapter 09 in Duckett.