HTML 5 audio element and streaming

Tags:

HTML 5 introduce the audio element and browsers does providing us with a native audio player for playing sound. This is a test on how well different browsers support streaming trough the native HTML 5 audio element.

The tests are done against live Ogg and Mp3 streams provided by The Norwegian Broadcasting Corporation. The streams are served by Icecast servers.

Only Ogg Vorbis as source:

This player has only one Ogg Vorbis source to the audio tag.

Only Mp3 as source:

This player has only one Mp3 source to the audio tag.

Both Ogg Vorbis and Mp3 as source:

This player are provided with two sources to the audio tag. Both a Ogg Vorbis and a Mp3 source. The browser should then pick the format it supports.

Test results:

Each above player has been tested in different browsers on different OS's. We then get the following test results:

OS: Browser: Single Ogg: Single Mp3: Multiple sources: Note:
Ubuntu Opera 10.54 nightly build true false Ogg Plays right away. If same stream is paused and started again it seems like the browser starts to play a cached part of the stream.
Windows XP Opera 10.53 true false Ogg Same as Opera on Ubuntu.
Mac OSX 10.6.3 Opera 10.52 beta2 true false Ogg Same as Opera on Ubuntu.
Ubuntu FireFox 3.6.8 true false Ogg Will first "pause" for ~10 seconds and then play the stream. On rare occations it will not play at all. If only unsupported file format is added, player will be displayed as a grey box with a X in it.
Windows XP FireFox 3.6.8 true false Ogg Same as FireFox on Ubuntu.
Mac OSX 10.6.3 FireFox 3.6.8 true false Ogg Same as FireFox on Ubuntu.
Ubuntu FireFox 4.0 Beta 1 true false Ogg Plays right away. If same stream is paused and started again it seems like the browser starts to play a cached part of the stream.
Ubuntu Chrome 6.0.472.0 dev false false false Player is shown for both Ogg and Mp3, but will not play at all.
Ubuntu Chrome 5.0.375.55 Beta false false false Same as Chrome on Ubuntu.
Windows XP Chrome 4.1.249.1064 false false false Same as Chrome on Ubuntu.
Windows XP Chrome 5.0.375.55 false false false Same as Chrome on Ubuntu.
Mac OSX 10.6.3 Chrome 5.0.575.55 false false false Same as Chrome on Ubuntu.
Windows XP Safari 4.0.4 (531.21.10) false false false Shows player but plays nothing.
Windows XP Safari 5.0 (7533.16) false false false Shows player but plays nothing.
Mac OSX 10.6.3 Safari 4.0.5 false true mp3
Mac OSX 10.6.3 Safari 5 false true mp3
iPad OS 4 Safari 4.?? false true mp3
Windows XP IE 8 false false false Player not shown at all.
Windows 7 IE 9 Preview 1.9.7874 false true mp3 Does not show player when only OGG is only source.

More about the HTML5 audio element

To get more information about the audio element, please see:
W3C HTML5 Specification
HTML5 Doctor

Bug reports

Mark Boas has been so kind to report a bug on the issues in Chrome and at Mozilla.
The Opera problem related to caching of stream has been reported and has track number DSK-300187. Opera's bug tracking is not public.

26.05.2010 05:41 - Posted by Trygve - Comments: 9 - Technical

Comments:

Very interesting experiment. I can't get the multiple sources version working for Firefox 3.6.3. Chrome never seems to work as you point out. Opera (10.53) seems to work best. (All on on Mac OSX 10.6.3) Guess we should file some bugs :)

26.05.2010 10:08 - Posted by Mark Boas - Permalink

Yeah. I think I need to check FireFox a bit more. I've seen the multiple source file work and not work. I might think it have to do with actually having multiple audio tags (not sources) on the same page. I'll set up a small test for that.

26.05.2010 10:56 - Posted by Trygve Lie - Permalink

Can also confirm that it works fine on the iPad and iPhone OS4. The issue with Chrome is a known one and has been filed here : http://code.google.com/p/chromium/issues/detail?id=40344

27.05.2010 10:34 - Posted by Mark Boas - Permalink

Until all are compatible, don't use it, you will exclude to many visitors...

31.05.2010 11:01 - Posted by Kennethvr - Permalink

One can start to use this feature before all browsers are compatible. The audio tag has fallback features so it is possible to add, lets say, a flash which will operate on the same streams. jPlayer is ideal for this. Slowly the fallback will degrade as support for native audio starts to appear in browsers.

02.06.2010 12:39 - Posted by Trygve Lie - Permalink

Confirming no sound in Safari 5.0 or Chrome 5.0.375.55 on Mac OSX 10.6.3

08.06.2010 09:30 - Posted by Kenneth Christensen - Permalink

Kenneth; seems like there was a drop in the audio streams while we both tested Safari so no sound seems to be related to that. Safari 5 on Mac is now confirmed to play. On Windows its still no support.

09.06.2010 01:03 - Posted by Trygve Lie - Permalink

I have ubuntu with Firefox 3.6.3. Same as with my own experiments with my icecast2 server streaming ogg, the html5 audio tag plays for 2 seconds then quits. I wish there were some way to let people on various platforms listen to my stream just by going to my web page and with no special software or plugins... in Firefox at least!

11.06.2010 09:18 - Posted by Leif Harmsen - Permalink

Thanks for the bug report! However, how could a browser tell the difference between a live stream and a slow server that doesn't support byte range requests? If it's just a slow server, then the current behavior makes more sense. We would also need some way of knowing what is "now" in the stream, as we otherwise have no way of continuing playback at "now" when unpaused.

27.07.2010 08:45 - Posted by Philip Jägenstedt - Permalink

Post a Comment:

HTML Syntax: NOT allowed