WFMU Streaming Live in HTML 5

A few days ago when talking with a colleague about a project to re-work our live flash player with some extra bells and whistles they joked that we should just do the project in html5. The next day I thought "Why not?".

So, here you have it: we now have a streaming audio client for our live mp3 stream using nothing but html 5. You can try it out right here. 

After spending a day putting it together I'd say that the predictions of Flash's demise are probably a bit premature but the time frames floated by some people may not be too far off the mark. At the moment I can't think of any other platform that can deliver rich media reliably across all the different browsers out there. 

Our html5 player appears to work well on Chrome and Safari (on Mac). Mozilla, which doesn't want to pay the Fraunhoffers - or anyone else -  to license proprietary media formats has left Firefox with no native mp3 support so Firefox users will instead get our OGG stream. IE, it will come as no surprise, seems to be a lost cause.

While it might take awhile for standards to evolve that work well across all browsers and platforms this player offers a glimpse of a leaner, bloat-free future where browsers will hopefully be able to handle rich media natively.

Thanks go out to the fine people at Happy Worm whose nicely done jquery based jplayer did most of the heavy lifting.

Comments

[john]

Works great!

[Matt]

I'm impressed by this simple, yet genius player. Now KFJC needs something like this and I'll be set. Thanks WFMU.

[woid]

Not working for me in Safari on OS 10.6. Graphics look good, but no audio.

[doron]

Hey wold, let me know what version of Safari you are using. It seems to work for most Safari/Mac people but I have had another report of someone getting a beach ball upon their first try. It worked on the second try. This is all pretty new so it will likely take some time to work out all the kinks. It seems to be most solid in Chrome.

[lipwak]

No functionada on my Camino 2.0.2 (10.4.11). The player shows but doesn't play. I see the correct show on the air and the browser tells me there are links for the play and volume controls but they don't work. (Should it give me the OGG stream, Camino being a Mozilla project?)

[Murray the Quay]

Warning! I tried this on a Windows XP machine running the latest Firefox and the music streamed, but when I closed the tab with the player, Firefox locked up and could not be shut down, even via Task Manager. Firefox could not be terminated by "End Process" in Task Manager. And what's more, the entire operating system became unstable and could not be shut down. I had to eventually turn the computer off and reboot via safe mode.

I have no idea if this experience is reflective of anyone else's, but I thought you should know.

[Christos]

Works great on Safari on Mac OS 10.6. When I tried to compare the sound of the HTML5 stream with the stream from iTunes I found out that there is a different stream! Which one is the live stream?

[Rob]

Also working in Opera 10.54 & Midori 0.2.4 on Crunchbang Linux (Debian). Also Opera 10.53 / Windows XP

[Jhh Löwengard]

Works for me on this here iPad!

[AndrewG]

I am running Ubuntu Linux. Works in Chrome, but not Firefox.

[bartelby]

I am running firefox and safari for mac os X 10.4 and it seems to work perfectly in booth

[dvessel]

Nice.. I hope more effort goes into this. Just noticed Free music archive doesn't use flash. Who the heck needs it to play audio streams? :)

[unca]

Firefox 3.6.3 Win32 here and working good. I do get the Vorbis stream, and it's too bad it's not stereo.

And I agree about dumping flash, as it's not standards based or open or free. I'm sorry you don't feel the same about mp3, but some day you will. Vorbis is great. And greater in stereo. ;)

[unca]

p.s. the volume is really really low. It's peaking at mere -12dB. That's about 25% as loud as it should be. Have you thought about some affordable computer-hosted audio processing before, like Breakaway? The "Live" version of that is only $129 and it competes with (and in many people's opinion WINS against) current $13,000+ flagship audio processors from the likes of Omnia, Orban, Vorsis, DSP-X, etc. Check out the time-unlimited free demos, and see what you think. ceaudio dot com

[Marek]

This is wonderful!
Well, I`m looking for such a thing for months. I`d like to play mp3 stream, but html5 audio player doesn`t support stream.
I want to ask, if you could be so kind and send me stream.php file please :)

Bcs when I set mp3 as src attribute in audio tag, it does not work :(
Thanks!

[Nate]

This is great! I'm listening to this on an iPad. You should turn this into a grooveshark competitor

[eg]

This is great and very innovative! The audio file plays back quite well. How are you doing the relay of the mp3 stream via your "stream3.php" file. Have you tried anything for an "on-demand" type interface? One note, it is quite easy to download the stream via the browser. Most other streaming technologies don't allow this as easily (you usually need a third party real time capture software of some sort).