Last week we featured a demo from Alistair MacDonald (@F1LT3R) where he showed how to animate SVG with Canvas and a bunch of free tools. This week he has another demo for us that shows how you can use the new audio element in Firefox 3.5 with some canvas and JS to build a nice-looking audio player.
But what’s really interesting about this demo is not so much that it plays audio – lots of people have built audio players – but how it works. If you look at the source code for the page what you’ll find looks something like this:
<div id="jai"> <canvas id="jai-transport" width="320" height="20"></canvas> <ul class="playlist"> <li> <a href="@F1LT3R - Cryogenic Unrest.ogg"> F1LT3R - Cryogenic Unrest </a> <audio src="@F1LT3R - Cryogenic Unrest.ogg"/>. <li> <a href="@F1LT3R - Ghosts in HyperSpace.ogg"> F1LT3R - Ghosts in HyperSpace </a> <audio src="@F1LT3R - Ghosts in HyperSpace.ogg"/>. </ul> </div> |
That’s right – the player above is just a simple HTML unordered list that happens to include audio elements and is styled with CSS. You’ll notice that if you right click on one of them that it has all the usual items – save as, bookmark this link, copy this link location, etc. You can even poke at it with Firebug.
The JavaScript driver that Al has written will look for a <div> element with the jai ID and then look for any audio elements that are inside it. It then will draw the playback interface in the canvas at the top of the list. The playback interface is built with simple JS canvas calls and an SVG-derived font.
Using this driver it’s super-easy to add an audio player to any web site by just defining a canvas and a list. Much like what we’ve seen on a lot of the web with the rise of useful libraries like jQuery, this library can add additional value to easily-defined markup. Another win for HTML5 and the library model.
Al has a much larger write-up on the same page as the demo. If you haven’t read through it you should now.
(Also? Al wrote the music himself. So awesome.)
Pingback from 颠覆网络35天 ─ HTML 5范儿的音频播放器 < MJiA on June 17th, 2009 at 1:19 am:
Pingback from nitot's status on Wednesday, 17-Jun-09 14:07:45 UTC - Identi.ca on June 17th, 2009 at 7:07 am:
Pingback from Encephalosponge » Back to the roots of Firefox on June 21st, 2009 at 10:06 pm:
Trackback from soma withdrawal on September 14th, 2009 at 7:02 am:
Trackback from tramadol prescription on September 14th, 2009 at 7:04 am:
Trackback from akane soma lasvegas on September 14th, 2009 at 7:05 am:
Trackback from feline panleukopenia tamiflu on September 14th, 2009 at 7:07 am:
Trackback from tamiflu cystic fibrosis on September 14th, 2009 at 7:08 am:
Trackback from vicodin snorted crushed on September 14th, 2009 at 7:17 am:
Trackback from online soma on September 14th, 2009 at 7:20 am:
Trackback from what is the action of tamiflu on September 14th, 2009 at 7:22 am:
Trackback from soma cod on September 14th, 2009 at 7:23 am:
Trackback from next day soma on September 14th, 2009 at 7:55 am:
Trackback from soma silk on September 14th, 2009 at 10:49 am:
Trackback from tamiflu deaths on September 14th, 2009 at 12:01 pm:
Trackback from soma carisoprodol online on September 14th, 2009 at 12:05 pm: