HTML5 Zone is brought to you in partnership with:

I am a programmer and architect (the kind that writes code) with a focus on testing and open source; I maintain the PHPUnit_Selenium project. I believe programming is one of the hardest and most beautiful jobs in the world. Giorgio is a DZone MVB and is not an employee of DZone and has posted 635 posts at DZone. You can read more from them at their website. View Full User Profile

Audio in HTML 5: state of the art

02.27.2012
| 3776 views |
  • submit to reddit
HTML 5 capable browsers support multimedia files as first class citizens - HTML is not a language for describing documents anymore, but more a medium for building applications, which can leverage every bit of built-in functionality to run fast and to not weigh heavily on the shoulders of developers for maintenance.
In this article, we'll see all the ways to play audio inside a modern browser via HTML 5.

The <audio> element

<audio> is a new tag not only able to load a sound file and play it, but also to feature a series of control buttons for playing, pausing and pausing the reproduction. Of course there are many use cases where you won't need controls, like for the background music of a game.

<audio> is not more complex than <img>: you specify a mandatory src attribute, and other options to configure the sound player where needed.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio</title>
</head>
<body>
    <audio src="doorbell.ogg" controls preload="auto" autobuffer></audio>
    <audio src="doorbell.ogg" controls></audio>
</body>
</html>
The attributes shown in this example (and a few others) are:
  • controls: when present, displays a browser-specific player to control the playback. The HTML 5 specification says that with these controls the user should be able to "begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume" and a bunch of other features that I have not seen supported yet.
  • autoplay: when present, tells the browser to begin playing the sound file as soon as it can.
  • loop: when present, specifies the sound file should start again as soon as it finishes.
  • muted: when present, sets the volume at 0 as a default.
  • preload: specifies a policy for loading the sound file. "none" corresponds to no prefetching, which minimizes traffic; "metadata" prefetches only the start of the file, in order to read metadata like a song's duration. "auto" authorizes the browser to prefetch the whole file.

Audio object

Apparently the combination of HTML 5 and CSS 3 is a Turing complete language: however, it is more practical to code behavior of a web application in JavaScript. That's why eveyrthing you can do with an <audio> element can also be accomplished programmatically with JavaScript Audio objects:
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio</title>
    <script type="text/javascript">
        var doorBell = new Audio("doorbell.ogg");
        doorBell.play();
    </script>
</head>
<body>
</body>
</html>

Thus via JavaScript you can control an audio element by calling a series of methods such as play() and pause(), and adjust properties like *volume*. Audio objects implement an interface named HtmlMediaElement, where you can find the list of all methods, plus modifiable and readonly properties available.

For example, doorBell.seekable.length is a range, while doorBell.currentTime is an assignable property to make reproduction jump to a certain point of the file.

Formats and support

The real problem with HTML 5 Audio right now is its support in different browsers; not the support for <audio> and Audio - which is pretty consistent - but for the codecs to play all the different formats an audio file can come in.

There are mainly two sides in the issue:

  • Firefox, Chrome and Opera being as usual friendly to open source and open formats, and being the first to support Ogg Vorbis. Ogg is an open container for audio and video files, and Vorbis is a free lossy codec like MP3, but without any patent on it.
  • Internet Explorer and Safari supporting MP3 instead.

Let's not even talk about support on mobile browsers, which is close to non-existent with respect to codecs.

By the way, for experimenting with <audio> stick to Chrome, Firefox and Opera. Fortunately, a series of <source> elements can be embedded in an <audio> (or <video>, equivalently) element to provide alternative formats, listed by MIME type:

<source src="audio.ogg" type='audio/ogg; codecs=vorbis'>

Encoding lots of files in different formats just to please browsers can be a pain, but it's viable in the case of small clips and sound effects.

Published at DZone with permission of Giorgio Sironi, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)