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 TypeDescription
.aacLossy 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.
.mp3Patented yet popular format, which uses lossy compression to achieve file sizes one-tenth of non-compressed.
.oggAn open source alternative to .mp3 that also uses a lossy compression format.
.wavProprietary format for audio that does not utilize any compression.
.webmGoogle’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>

Notes
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.

ValuesDescription
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>
Related Tutorial