HTML 5 audio player demo
To teach myself a little about HTML 5 and its built-in support for rich media, I built a proof-of-concept HTML5 audio player, written entirely in HTML 5, JQuery and CSS 3. It more or less replaces all the functionality of the Flash audio player on my music site.
It took a little over two hours starting from nothing. Developed it in Safari 4.0 and works great with that browser. Haven't yet tested it in Firefox 3.5, which claims HTML 5 audio/video media support as well. (UPDATE: Firefox doesn't support the MP3 format. You're stuck with Ogg or WAV.) It "works" in Mobile Safari on my iPhone 3G, but it's not pretty: the audio element is visible and the MP3 launches a Quicktime player.
Think what you want about the iPad and Apple's non-support of Adobe Flash. If you're a web developer and not excited about creating rich media experiences with HTML, Javascript and CSS, you just might be a dried-out husk.
Feel free to hack this code. You can send screenshots (links only, please!) and bug reports to me here.
5 Comments:
Scott, it works great under the webOS browser - excellent!
Your Player is a good Start ^_^ I'm really looking forward to the new Improvements and Support that Browsers are going to offer with HTML5.
I'm working on a HTM5 iTunes Replacement called AlienBoombox.com, and I look forward to Open-Sourcing it and a Music Player that doesn't kill my computers performance.
We're burning hot with progress, hopefully we'll have something more functional than our Demo in the next few months.
it works in chrome on the mac. version 9
I had an error with firefox to use this code with a video in ogg format.
Do not forget the third argument in the Listeners :
video.addEventListener('progress', function(evt) {...}, false);
Safari auto fill it with 'false' if missing but firefox doesn't.
Thx
I like the new look of thehtml5 music player Player is faster is better and my slow computer with crappy video card will not got slow anymore, nice job you guys!
Post a Comment
<< Home