HTML5 Audio
Like HTML5 Video the HTML5 Audio specification opened up the doors to native audio in the browser. Like Video we are also required to provide multiple fallback options in order to provide support to as many browsers and devices as possible.
Project Files
Supported Audio Types in HTML5
- mp3 – Safari, Chrome, IE9+
- wav – Safari, Opera, IE9+, Firefox
- ogg – Firefox, Opera, Chrome
Encoding Tools
The Markup
<audio> Attributes
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | Specifies that the audio will start playing as soon as it is ready |
| controls | controls | Specifies that audio controls should be displayed (such as a play/pause button etc). |
| loop | loop | Specifies that the audio will start over again, every time it is finished |
| preload | auto metadata none |
Specifies if and how the author thinks the audio should be loaded when the page loads |
| src | URL | Specifies the URL of the audio file |
Source
<audio controls="controls"> <source src="thunder.ogg" type="audio/ogg" /><!-- Firefox, Opera, Chrome --> <source src="thunder.mp3" type="audio/mp3" /><!-- Safari, Chrome, IE9+ --> <source src="thunder.wav" type="audio/wav" /><!-- Safari, Opera, IE9+, Firefox --> <a href="thunder.mp3">Download the Audio</a> </audio>
Examples
- Examples Index
- HTML5 Audio
- HTML5 Audio with Flash Fallback – Multi-File
- HTML5 with Flash Fallback – Single MP3 File
Polyfills and Players
- jPlayer custom player with jQuery dependency, flash fallback
- audio.js custom player, flash fallback by ab+c
- SoundManager2 custom player, flash fallback, api, extensive documentation