Design Template by Anonymous

Using Audio in HTML

The use of audio on the web can take an incredibly wide variety of forms. From heavily audio-focused music and podcast streaming sites to more subtle inclusions of notification sounds and rewarding confirmation of a completed click, the incorporation of audio into site design can be an engaging tool that can quickly boost users' immersion and satisfaction.

The <audio> Element

Beginning with the basics, the simplest form that audio can take online is HTML's own audio element. The element will embed an audio file into the content of a webpage. Much like with an image or other piece of embedded media, the audio element uses the src attribute with a URL to provide the exact audio content source file. This audio source can be any sort of audio stream, whether it be a song, short sound effect, narration, etc., although HTML itself only supports 3 kinds of filetypes:

MP3
WAV
and OGG

Depending on your web browser, this list can also be limited, as not all browsers support OGG filetypes, though this can be easily accommodated for, as will be described below.

While not required, the other important and notable attribute of the audio element is the controls attribute. By default, nothing will appear visually on a webpage from an audio element except the text between the tags in the case the element is unsupported by the browser. That is unless the controls attribute is included.

The default visual appearence of and `audio` element with the `controls` attribute on Safari web browser.

The same element's default appearence on Chrome.

This attribute will embed a control bar into the site content that will allow the user to play/pause, seek, and view the progress of the audio content. Different browsers have their own default control bars, but these can be heavily customized both visually and in the type of controls available using JavaScript and the HTMLMediaElement API.

Other Attributes and Events

In addition to those mentioned above, the audio element has quite a few other attributes, some of which include:

autoplay - plays audio content upon loading the page.
loop - content restarts from beginning upon completion.
preload - which parts of content should be loaded with the page rather than upon play.
muted - the content is (unsurprisingly) muted.

The HTMLMediaElement API allows for great control and customization of an audio element's controls by monitoring and firing different events depending on the state of the media. These provide great potential for precision when developing a control scheme for one's site. Some notable events that are fired include:

canplaythrough - if the audio is loaded enough to be played all the way to the end with no interruptions.
play/pause - the state of the content's playback status.
seeked/seeking - if the content is being seeked through or a seek is completed.
volumechange - this one is pretty self-explanatory, fired if the volume is changed.

Multiple Sources of Audio

An audio element's content does not necessarily need to be specified by a src attribute. Instead, any number source elements can be used within the audio tags. This can account for audio file formats, primarily OGG files, that may be unsupported by a browser. When loading the element, the browser will descend the list of sources in order of appearance until it finds one whose filetype it supports. This is the content that gets played.

<audio>
    <source src="mysong.ogg" type="audio/ogg">  Is this type supported? No? Keep going.
    <source src="mysong.mp3" type="audio/mpeg">  Is this type supported? Yes! Select and play this source.
</audio>

Alternatively, if it is not appropriate to the design of your site to have a set of preexisting audio files, the Web Audio API and JavaScript can be used to generate and fetch audio steams of various different content and sources.