Native Audio in the browser
Tags: html 5, audio
| ← 5 Steps to Understanding Drag and Drop with Ext JS | The Address Element → |
Until very recently the ability to play any type of audio within a browser involved using Adobe Flash or other browser plugins. Although Adobe’s Flash player is without doubt the most ubiquitous of these, most developers and designers would agree it is better not to rely on a plugin at all.
Enter HTML 5 <audio>
One of the most exciting and long awaited for features in HTML 5 is without doubt the audio tag which enables us to play audio natively within the browser. We can take advantage of this for browsers that support it such as Safari 4, Firefox 3.5 and Chrome 3, while falling back on Flash or other plug-in for other browsers.
Currently the HTML 5 spec specifies 5 attributes for the audio element :
src – a valid URL specifying the content source.
autobuffer – a boolean specifying whether the file is to be buffered in advance.
autoplay – a boolean specifying whether the file should play as soon as it can.
loop – a boolean specifying whether the file should be repeatedly played.
controls – a boolean that if set tells the browser to display its default media controls.
Note that these are the same attributes that are used to control video.
Let’s take a couple of these attributes and create a simple example that will play an audio file:
Hide code highlighting
(This example will work for Firefox 3.5 and Chrome 3, while you need to replace the ogg file with an mp3 to get it working in Safari 4.)
It’s worth noting that the spec is not yet finalised and unfortunately there has yet to be a consensus on which codecs to support, each browser supporting a different combination of codecs:
FireFox 3.5 - Ogg Vorbis, WAV
Safari 4 - WAV, MP3
Chrome 3 (beta) - Ogg Vorbis, MP3
Opera 10 (beta) - WAV
To take things further and define our own user controls we can use other key methods and attributes outlined in the spec, such as:
play() – plays the audio.
pause() – pauses the audio.
canPlayType() – interrogates the browser to establish whether the given mime type can be played.
buffered – attribute that specifies the start and end time of the buffered part of the file.
Note that Opera 10 does not support <audio>, but does support Audio() in a basic and unique manner, from the above list currently it only supports the play() attribute.
Safari 4, Firefox 3.5 and Chrome 3 beta support both <audio> and Audio() object. Internet Explorer 8 has no audio support whatsoever.
Using the Source
The first port of call when trying to get all the browsers to support the <audio> (or in fact either of the media elements) is to use the <source> element. This tells the browser to try to load the first audio source, and if it fails or isn’t supported, it moves on to the next audio source. On top of this, we can embed the flash version if the <audio> isn’t supported:
Hide code highlighting
However, perhaps due to a bug, you need to be careful about the order in which you give these <source> elements. If you try to give Firefox the MP3 first (which it doesn’t support), it will silently fail and refuse to continue with that particular <audio> element. The trick is to make sure Ogg Vorbis is first, then the other formats, as Webkit (Safari & Chrome) will handle these just fine.
Opera is another kettle of fish altogether, which we’ll need to solve using JavaScript as you’ll see next.
Cross-Browser Implementation
Using JavaScript You can check for audio tag support like this:
Hide code highlighting
Checking for the audio object looks more like this:
Hide code highlighting
The code needed to check for file type compatibility could look something like this:
Hide code highlighting
Note that to actually change the src of the audio object/element you need to recreate the audio element or object with the new src.
So typically to create a solution that takes full advantage of HTML 5 audio you will need to:
1. Check for HTML 5 audio support and if not present fall back on Flash.
2. Check the level of HTML 5 audio support and adapt your code accordingly for each browser.
3. Check what file types are supported and link to appropriate formats of the files.
The Road Ahead
The good news is that although HTML 5 audio is a relatively immature part of the standard, if recent trends continue and users upgrade to the latest versions of Safari and Firefox, browser support is likely to rise above the 25% mark in the very near future. This is a significant chunk of the browser market that will no longer need to rely on Adobe’s Flash, Microsoft’s Silverlight or any other browser plugin for their audio support.
Add to this the possibility of mobile and other lower spec devices such as Apple’s iPod (Safari), Nintendo’s Wii (Opera) and Google Android powered devices (Chrome) choosing to support HTML 5 audio (rather than the currently unsupported Flash) and you begin to build up a picture of how important native audio support could become.
Original: Native Audio in the browser
Enter HTML 5 <audio>
One of the most exciting and long awaited for features in HTML 5 is without doubt the audio tag which enables us to play audio natively within the browser. We can take advantage of this for browsers that support it such as Safari 4, Firefox 3.5 and Chrome 3, while falling back on Flash or other plug-in for other browsers.
Currently the HTML 5 spec specifies 5 attributes for the audio element :
src – a valid URL specifying the content source.
autobuffer – a boolean specifying whether the file is to be buffered in advance.
autoplay – a boolean specifying whether the file should play as soon as it can.
loop – a boolean specifying whether the file should be repeatedly played.
controls – a boolean that if set tells the browser to display its default media controls.
Note that these are the same attributes that are used to control video.
Let’s take a couple of these attributes and create a simple example that will play an audio file:
Hide code highlighting
1 | <audio src="html5.ogg" controls autobuffer></audio> |
(This example will work for Firefox 3.5 and Chrome 3, while you need to replace the ogg file with an mp3 to get it working in Safari 4.)
It’s worth noting that the spec is not yet finalised and unfortunately there has yet to be a consensus on which codecs to support, each browser supporting a different combination of codecs:
FireFox 3.5 - Ogg Vorbis, WAV
Safari 4 - WAV, MP3
Chrome 3 (beta) - Ogg Vorbis, MP3
Opera 10 (beta) - WAV
To take things further and define our own user controls we can use other key methods and attributes outlined in the spec, such as:
play() – plays the audio.
pause() – pauses the audio.
canPlayType() – interrogates the browser to establish whether the given mime type can be played.
buffered – attribute that specifies the start and end time of the buffered part of the file.
Note that Opera 10 does not support <audio>, but does support Audio() in a basic and unique manner, from the above list currently it only supports the play() attribute.
Safari 4, Firefox 3.5 and Chrome 3 beta support both <audio> and Audio() object. Internet Explorer 8 has no audio support whatsoever.
Using the Source
The first port of call when trying to get all the browsers to support the <audio> (or in fact either of the media elements) is to use the <source> element. This tells the browser to try to load the first audio source, and if it fails or isn’t supported, it moves on to the next audio source. On top of this, we can embed the flash version if the <audio> isn’t supported:
Hide code highlighting
1 2 3 4 5 | <audio controls autobuffer> <source src="elvis.ogg" /> <source src="elvis.mp3" /> <!-- now include flash fall back --> </audio> |
However, perhaps due to a bug, you need to be careful about the order in which you give these <source> elements. If you try to give Firefox the MP3 first (which it doesn’t support), it will silently fail and refuse to continue with that particular <audio> element. The trick is to make sure Ogg Vorbis is first, then the other formats, as Webkit (Safari & Chrome) will handle these just fine.
Opera is another kettle of fish altogether, which we’ll need to solve using JavaScript as you’ll see next.
Cross-Browser Implementation
Using JavaScript You can check for audio tag support like this:
Hide code highlighting
1 2 | var audioTagSupport = !!(document.createElement('audio').canPlayType); // returns a boolean |
Checking for the audio object looks more like this:
Hide code highlighting
1 2 3 4 5 6 7 8 9 10 | try { // The 'src' parameter is mandatory in Opera 10, so have used an empty string "", // otherwise an exception is thrown. myAudioObj = new Audio(""); audioObjSupport = !!(myAudioObj.canPlayType); basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false); } catch (e) { audioObjSupport = false; basicAudioSupport = false; } |
The code needed to check for file type compatibility could look something like this:
Hide code highlighting
1 2 3 4 5 6 7 8 9 10 | // Need to check the canPlayType first or an exception will be // thrown for those browsers that don't support it if (myAudio.canPlayType) { // Currently canPlayType(type) returns: "no", "maybe" or "probably" canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg")); canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg")); } |
Note that to actually change the src of the audio object/element you need to recreate the audio element or object with the new src.
So typically to create a solution that takes full advantage of HTML 5 audio you will need to:
1. Check for HTML 5 audio support and if not present fall back on Flash.
2. Check the level of HTML 5 audio support and adapt your code accordingly for each browser.
3. Check what file types are supported and link to appropriate formats of the files.
The Road Ahead
The good news is that although HTML 5 audio is a relatively immature part of the standard, if recent trends continue and users upgrade to the latest versions of Safari and Firefox, browser support is likely to rise above the 25% mark in the very near future. This is a significant chunk of the browser market that will no longer need to rely on Adobe’s Flash, Microsoft’s Silverlight or any other browser plugin for their audio support.
Add to this the possibility of mobile and other lower spec devices such as Apple’s iPod (Safari), Nintendo’s Wii (Opera) and Google Android powered devices (Chrome) choosing to support HTML 5 audio (rather than the currently unsupported Flash) and you begin to build up a picture of how important native audio support could become.
Original: Native Audio in the browser
Rating:
<< Please, rate this articleRelated articles:
The Address Element
The time element (and microformats)
Comments of article:
Jeff King [2010-05-11]
This was very helpful. Thank you.
There are a few typos in your support checks:
<ul>
<li>basic support should be tested with one less "!": <code>!!(!audioObjSupport ? myAudioObj.play : false);</code></li>
<li><code>canPlayOgg</code>, <code>canPlayMp3</code> and the surrounding <code>if</code> use the uninitialized variable <code>myAudio</code>. I think you mean <code>myAudioObj</code></li>
<li>You may want the if condition surrounding <code>canPlayOgg</code> and <code>canPlayMp3</code> test for <code>audioObjSupport</code> instead of <code>myAudio.canPlayType</code></l i>
</ul>
Thanks again.
HeeL [2010-05-11]
Thank you too, Jeff King ;)
Nate [2010-08-21]
Thank You! I've been searching the web to fix this problem.
Українська