HTML5 and CSS3 Advent 2011

Let us hear some noise!

Audio? — you might think in horror — isn't that for those annoying websites from the nineties? That might be true, but with HTML5-gaming and online streaming audio is an important part of the web. The HTML5 <audio> tag allows us to embed audio without the need for any third-party plugins like Flash or Quicktime.

Just a sweet sound effect for the button (hover and click it!)
The default built-in audio controls
Current time
0:00
Progress
Total playing time
Player with custom controls

How does it work

In our example we use two methods to access the audio capabilities of your browser. In the first example we use javascript only to attach sounds to the different events. In the second example we use your browser's built-in audio player and in the third we added our own controls to the built-in player.

Basically you start with an <audio> tag that you can give multiple sources. Most unfortunately we have to add multiple sources as not all browsers support all formats. To make the audio work cross-browser we have to add at least .ogg and .mp3 versions of our sound. By setting different attributes on the <audio> tag we can influence the way it works. The most useful of these is the preload property which defines how much of the audio the browser should load and the controls property which defines whether or not the browser should show the default controls.

Feel free to look around our source (javascript and css), it's probably not 100% fool-proof but it works in newest versions of Chrome, Safari and Firefox.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012