In principle, adding audio to a web page is quite straightforward. Assuming you have a standard mp3 file, just point the src attribute of the audio element to the file‘s location, just as you would in an img tag:

<audio src="03-ghosts-I.mp3">
</audio>

Making Audio Visible

However, that code doesn‘t result in anything visible on the page. The controls attribute must be added to the element to produce an audio control bar:

<audio src="03-ghosts-I.mp3" controls>
</audio>

The appearance of the control bar will differ between browsers, depending on the operating system. It‘s completely possible to craft your own UI for the audio element, but that requires writing some JavaScript.

By default, the user should have the ability to start and stop the audio for themselves. Autoplaying and looping the audio file is possible, but should never, ever be used, outside of testing purposes during development:

<audio src="03-ghosts-I.mp3" 
    controls autoplay loop>
</audio>

It’s also possible to set the embedded audio to silent using the muted attribute, and to set an initial volume level with a floating-point value between 0 and 1 for the volume attribute.

Bufffffering

Browsers will usually try to download a portion of the audio source before it is played by the user in order to assure smooth playback. This process, known as buffering, continues during playback, with the browser downloading audio data just ahead of the current time.

Buffering can be controlled using the preload attribute. preload has several possible values that act as suggestions for the browser:

• none: don’t retrieve any audio before playback is initiated.
• metadata: download the ID3 metadata associated with the file, such as track name and length, but don’t buffer the actual audio data.
  
• auto: download metadata and buffer some of the audio.

auto is the default value for browsers, and doesn’t have to be specified in most cases. You may want to use a value of metadata if you expect a high volume of visits to your site. In principle, this should reduce the initial load of the page, but still provide information on the track:

<audio src="03-ghosts-I.mp3" controls
    preload="metadata">
</audio>

It is important to emphasize that these preload values are hints; the browser doesn’t have to follow them. For example, presented with a value of metadata, the browser may still buffer some audio, depending on network conditions.

You can determine if the browser has enough data to begin playback in two ways using JavaScript:

1. Inspect the buffered read-only attribute, which contains a time range of the currently buffered audio data.
2. Wait for the canplay event to fire. canplay determines that there is enough buffered audio to begin playback.

codec support

After some back-and-forth, browsers have settled on mp3 as a standard for web audio. Its possible to use other audio codecs in your web page, although they don’t enjoy the complete support that mp3 enjoys. If you do decide to use another codec, you must include an mp3 file as a fallback for the audio element. For example, if you decided to use a flac file for it’s higher quality, the structure of the audio tag would change to:

<audio controls>
    <source src="03-ghosts-I.flac"> 
    <source src="03-ghosts-I.mp3"> 
</audio>

As with the video element, the source options are written in order of preference: if the browser understands flac, it will use that file. Otherwise, the mp3 version will be played.

Labelling audio

There are many ways to present information about the track, but the most straightforward is to use a figure element:

<figure>
    <audio controls> 
        <source src="03-ghosts-I.mp3"> 
    </audio>
    <figcaption>Track 03, Ghosts I, Nine Inch Nails, used under Creative Commons</figcaption>
</figure>

Accessibility

The native audio element is quite accessible to users - one reason to carefully consider wether you actually need to build your own UI - but still needs a little work to accommodate those who may be hard of hearing.

If the audio content is a spoken work performance such as a speech, interview, or podcast, it makes sense to provide a transcript for the audio directly above or below the element.

For music, it’s a good practice to include a track inside the audio element to provide live subtitling for users who are hard of hearing.

MIME Types

It is vital that your web hosting server deliver audio in a way that the browser will understand. Modern servers should deliver mp3 just fine, but adding the MIME type doesn’t hurt, and can help with newer codecs, such as flac:

<audio controls>
    <source src="03-ghosts-I.flac"      
        type="audio/flac">
    <source src="03-ghosts-I.mp3" 
        type="audio/mpeg">
</audio>

In addition, you can add the audio types to the .htaccess file of your site to force the correct MIME type:

AddType audio/flac .flac
AddType audio/mpeg .mp3

If you do the latter, there is no need to add a type attribute to each audio stream.

Conclusion

As you have seen, adding audio to a web page is quite straightforward: the issues usually lie in creating a small audio file with good quality to reduce bandwidth costs and load times.

The audio element is ideal for playing back continuous audio tracks, such as music, interviews, and podcasts. It is not generally suited for cases where instant response or fine-grained control is needed, such as button sounds (although it can be done) and games. In those cases, developers usually turn to the Web Audio API.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.