9.7. The HTML5 Audio Element

The following HTML5 code shows how to utilize the HTML5 audio element that plays audio files for the user without any plugins installed in your browser.

<audio preload controls>
    <source src='sound.ogg'/>
    <source src='sound.mp3'/>
    <p> <!-- paragraph displays if audio element not supported -->
        <a href='sound.ogg'>Download <i>ogg</i> File</a>,
        <a href='sound.mp3'>Download <i>mp3</i> File</a>
    </p>
</audio>

A couple of remarks. If you need only one source file, the src attribute may b put directly into the audio element. You need several source elements if the browser doesn't recognize but one, the others are alternatives. The browser will use the first that it recognizes.

The paragraph inside the audio element will only display if the browser does not yet support the audio element of HTML55. It supplies links to facilitate downloading the sound files for offline replay.

The attributes on the audio element, preload, and controls, instruct the browser to preload the file before starting replay, and to supply rudimentary controls for the replay. Please do remember never to include audio or video on your pages without giving your user the possibility of not having to see or hear it. It is considered extremely bad usability.