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
<audio> tag allows us to embed audio without the need for any third-party plugins
like Flash or Quicktime.
How does it work
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
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.
Show us the source!
Feel free to look around the different source files we used for this example.