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
<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>
Note the lack of any value for the
controls is an example of a “boolean” attribute: if the word
controls, by itself, is present in the
audio element, it has an effect; if not, the control bar is not shown. Formally, it’s also valid to write
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
For obvious reasons, setting the `volume` value for an
audio element is independent from the volume settings that a user has on their own device.
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 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.
- Inspect the
bufferedread-only attribute, which contains a time range of the currently buffered audio data.
- Wait for the
canplayevent to fire.
canplaydetermines that there is enough buffered audio to begin playback.
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.
There are many ways to present information about the track, but the most straightforward is to use a
<figure> <audio controls> <source src="03-ghosts-I.mp3"> </audio> <figcaption>Track 03, Ghosts I, Nine Inch Nails, used under Creative Commons</figcaption> </figure>
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.
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
<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.
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.
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.