HTML5 AUDIO

Inserting sound onto a web page is not relatively easy, because browsers did not have a uniform standard for defining embedded media files.

In this chapter we’ll demonstrates some of the many ways to embed sound in your webpage, from the use of a simple link to the use of the latest HTML5 <audio> element.

Using the HTML5 audio Element

The newly introduced HTML5 <audio> element provides a standard way to embed audio in web pages. However, the audio element is relatively new, but it works in most of the modern web browsers. The following example simply inserts an audio into the HTML5 document, using the browser default set of controls, with one source.

EXAMPLE
<audio controls="controls" src="media/song.mp3">
    Your browser does not support the HTML5 audio element
</audio>
Result

An audio, using the browser default set of controls, with alternative sources.

EXAMPLE
<audio controls="controls">
    <source src="media/song.mp3" type="audio/mpeg">
    <source src="media/song.ogg" type="audio/ogg">
    Your browser does not support the HTML5 audio element.
</audio>
Result

The ‘ogg’ track in the above example works in Firefox, Opera and Chrome, while the same track in the ‘mp3’ format is added to make the audio work in Internet Explorer and Safari.

Linking Audio Files

You can make links to your audio files and play it by ticking on them.

EXAMPLE
<a href="media/envy.mp3">TRACK 1</a>
<a href="media/envy.mp3">TRACK 2</a>