Audio in HTML 5: state of the art
Audio in HTML 5: state of the art
Join the DZone community and get the full member experience.
Join For FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
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.
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}