Adding HTML5 Audio

To play native audio on your web page. Add the audio element, with the src attribute referencing the file location of your audio file and fallback content for older browsers:

snippet

<audio controls>
    <source src="audio.ogg">
        <source src="audio.mp3">
            Download <a href="audio.ogg">episode 42 of Learning to Love HTML5</a>
</audio>

controls attribute

Add 'controls' attribute if you want browsers to display a default control interface for your audio.

Audio Codecs

File Type	Description
.aac	Lossy compression scheme developed as an improvement over MP3, with similar bit rates but better sound quality. Google’s open, royalty-free media format, which relies on the Vorbis audio codec for compression.
.mp3	Patented yet popular format, which uses lossy compression to achieve file sizes one-tenth of non-compressed.
.ogg	An open source alternative to .mp3 that also uses a lossy compression format.
.wav	Proprietary format for audio that does not utilize any compression.
.webm	Google’s open, royalty-free media format, which relies on the Vorbis audio codec for compression.

Integrating Multiple Sources

HTML5 enable us to declare multiple audio files in your HTML5 audio.

snippet

<audio controls>
    <source src="audio.ogg">
        <source src="audio.mp3">
            Download <a href="audio.ogg">episode 42 of Learning to Love HTML5</a>
</audio>

Note

When using the source element in audio, the src attribute is dropped.

Preloading the Audio

audio has several attributes that allow you to configure your audio implementation.

The preload attribute allows to hint to the browser when it should begin buffering
the audio. preload is used to optimize the download process. Currently has limited browser support.

<audio controls preload>

There are three preload values.

Values	Description
`preload="auto"`	It leaves the action up to the browser. If it is a mobile situation or a slow connection, the browser can decide not to preload in order to save bandwidth.
`preload="metadata"`	Tells the browser not to buffer the audio itself until the user activates the controls but metadata like duration and tracks should be preloaded.
`preload="none"`	Tells the browser that not to buffer the audio itself until the user activates the controls.

Creating Fallback Content

Fallback simply means that if a users browser doesn’t support HTML5 audio, it instead displays the fallback content. For these users you could include fallback Flash.

snippet

<audio controls>
    <source src="audio.ogg">
        <source src="audio.mp3">
            <object data="player.swf?audio=audio.mp3">
                <param name="movie" value="player.swf?audio=audio.mp3"> Video and Flash 
                                            are not supported by your browser.
            </object>
</audio>

You could also include a download link for audio as a fallback content.

snippet

<audio controls>
    <source src="audio.ogg">
        <source src="audio.mp3">
            Your browser doesn't support HTML5 audio. You should upgrade. download <a href="audio">Download</a>.
</audio>