Thomas Wallace

Lectures and Resources

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

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

Additional Reading and Resources