audio player – HTML5 style

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.

View the Demo in Firefox 3.5


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:

(The actual list has fallbacks and is more compact – cleaned up here for easier reading.)

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.)

About Christopher Blizzard

Making the web better, one release at a time.

More articles by Christopher Blizzard…


  1. Elijah Grey

    The SVG fonts part is very surprising. I thought that Firefox doesn’t support SVG fonts yet, or is it all being done by the JavaScript?

    June 16th, 2009 at 18:57

  2. Garbled

    This is……………………. rad.

    I can see this JAI thing growing into something like the Flash-based XSPF player, which has mini- and micro-player versions.

    June 16th, 2009 at 19:06

  3. Boris

    The visual of the player is fine, but for any reason all audio using the new Fx3.5 sound bad, with pitch, microstop and go many times.
    If the browser is put in the backgroud the sound is earing fine.

    Sorry for the pseudoenglish.

    June 16th, 2009 at 20:33

  4. Aaron Train

    Each day, it is becoming more and more evident that the Open Web and the technology of tomorrow is expanding and blossoming into beautifully crafted future Internet. This audio, ‘JAI’ example just proves it.

    Totally dig the tunes too!

    June 16th, 2009 at 23:14

  5. […] 原文地址:audio player – HTML5 style 系列地址:颠覆网络35天 […]

    June 17th, 2009 at 01:19

  6. Ken Saunders

    Too damn cool!

    404 on this though.

    June 17th, 2009 at 02:40

  7. Christopher Blizzard

    @Aaron – Yeah, I like the music as well. :)

    June 17th, 2009 at 05:43

  8. @Ken Saunders – 404 fixed.

    @Elijah Grey – Yes I am passing an that contains font glyphs using Javascript. It is the same engine I built for Processing.js, with a couple of minor modifications, so the fonts work cross-browser(except IE). I use the Batik Java .ttf to .svg converter to generate my glyphs from a True Type font.

    @Everyone – glad you are enjoying the music! Sorry for the low-quality audio, I figured people would rather hear something quickly and get an idea of how things work. The thing I like about HTML5 media most… is the simplicity… document.getElementsByTagName(“audio”)[0].play();

    June 17th, 2009 at 06:23

  9. […] Audio Player using <audio>, <canvas> and <svg>. Soon in a Firefox 3.5 near you! […]

    June 17th, 2009 at 07:07

  10. Timon

    i have a question not about the player, but about the audio tag. how to play audio in mpeg codec? i know that firefox support only wave and ogg formats, but mp3 is more useful

    June 18th, 2009 at 02:09

  11. thinsoldier

    But did it really need to use Canvas?
    Couldn’t an almost identical interface be built with html elements, css gradients, background images, border-radius, and css fonts?
    And then, if built without canvas wouldn’t it be better somehow for users of assistive technology?

    When will Firefox support css gradients and multiple background images?

    June 19th, 2009 at 18:26

  12. Al

    No audio dosn’t really ‘need’ to use the Canvas. And yes you can style up the browser’s audio player with CSS. But I wanted to use the canvas because I wanted to. I know that’s circular reasoning but all the best programs loop.

    Anyway, images are evil rasterized pieces of junk. One day no-one will use images because they suck. Hahaha. But it’s true. Vive la algorithm.

    June 19th, 2009 at 19:24

  13. BobChao

    another AUDIO demo:

    June 19th, 2009 at 22:03

  14. Garbled

    While I cannot vouch for the “uselessness” of images (for applications like, I dunno, photographs), it seems like canvas could be the right idea for this type of job. Presumably a canvas player could be modified (resized, re-colored, re-skinned) on the fly and even take up less bandwidth than images… though perhaps [?] more processing power to display.

    June 20th, 2009 at 12:01

  15. Al

    Apologies for the post-beer, post-pm rambling re: uselessness of images. But I do think raters are over-used in web development. 4k of code can draw something way prettier than 4k of raster.

    Regardless of all that… JAI was designed so it could expand or completely change color, style without having to use any images. I guess a lot of my programming style goes back to the days where using images was not really an option. My first computer had 16k of ram, which is less than most pictures on the internet, but you could still draw awesome graphics with it.


    June 20th, 2009 at 12:07

  16. […] favorite things are being able to embed a font in my website so that I can type in any font I want, the ability to play embedded OGG audio and Theora video directly so that I can avoid using Adobe Flash, and some crazy SVG stuff. Check out more at […]

    June 21st, 2009 at 22:06

  17. bohwaz

    Sadly it’s very slow on my computer, slower than Flash :-/

    June 28th, 2009 at 04:10

  18. fda soma 250 mg…

    soma yoga utah. soma drug test. buy soma online no prescription. soma compound. …

    September 14th, 2009 at 07:02

  19. tramadol apap…

    soma yoga utah. soma drug test. buy soma online no prescription. soma compound. side effects tramadol. tramadol prescription. buy tramadol online no prescription. tramadol hcl 50mg. buy cheap tramadol online 35009. tramadol canine side effects. …

    September 14th, 2009 at 07:04

  20. soma snakeoil…

    tramadol withdrawal. tramadol for sale. buy tramadol online cod. buy tramadol free shipping. tramadol withdrawal symptoms. soma cubes. buy soma online. soma muscle relaxant. soma effects. soma no prescription. snorting soma. effects of soma. …

    September 14th, 2009 at 07:05

  21. tamiflu didn’t cure…

    tamiflu wonkette. tamiflu 75. veterinary tamiflu. tamiflu and effectiveness and safety. tamiflu vaccine. tamiflu effective h5n1. otc tamiflu. …

    September 14th, 2009 at 07:07

  22. tamiflu suspension stability…

    tamiflu shelf life. tamiflu capsule for parvo. tamiflu dosage for feline. tamiflu and effectiveness and safety. tamiflu other name. tamiflu and dizziness. tamiflu. buy generic tamiflu. …

    September 14th, 2009 at 07:08

  23. vicodin withdrawal…

    buy soma online. soma yoga utah. soma side effects. soma cube directions. soma on line. vicodin long term effects. vicodin with no prescription. vicodin vicodin. vicodin no prescription. vicodin and alcohol. side effects of vicodin. vicodin online with…

    September 14th, 2009 at 07:17

  24. drug soma…

    soma discount code. soma online. drug testing times for soma. lady soma. big hits of mid america soma. cod soma. soma drug history. …

    September 14th, 2009 at 07:20

  25. tamiflu purchase avian bird flu…

    adult dating uk. adult phone dating. adult dating communities. tamiflu side effects. is tamiflu dangerous. tamiflu side effects japan. tamiflu excretion. tamiflu dosage. …

    September 14th, 2009 at 07:22

  26. soma cafe…

    walgreens xanax. xanax and alcohol. xanax detox. xanax suicide. soma mattress. soma muscle relaxant. soma description. fda soma 250 mg. soma life. …

    September 14th, 2009 at 07:23

  27. soma muscle relaxer…

    soma generic. soma muscle relaxer. discount soma. villa soma san francisco. soma fabrications. soma cube. …

    September 14th, 2009 at 07:55

  28. soma bicycles…

    soma cheap without rx. soma addiction. drug test soma. soma bike frame. soma mandal. aura soma. …

    September 14th, 2009 at 10:49

  29. canine tamiflu…

    tamiflu buy. veterinary tamiflu. tamiflu veterinary. tamiflu buy. tamiflu assessment. flu symptoms and tamiflu. …

    September 14th, 2009 at 12:01

  30. soma without a prescription…

    soma side effects. buy soma online without rx. soma watson brand. soma dosage. …

    September 14th, 2009 at 12:05

  31. fearphage

    If the code didn’t use a proprietary nonstandard format, it would be a cross-browser demo.

    Here’s a cross-browser demo that works in all modern browsers:

    Here’s a version with the code cleaned and redundancies removed:

    All changes are in the respective jai.js files.

    February 18th, 2010 at 12:56

  32. Henry Gilbert

    This is kinda good news.

    I’ve built a site for a music producer in London – and I used a Flash player.
    He keeps on complaining that because it is an mp3 people visiting the site won’t be able to appreciate the very subtle nuances that get lost during the transcode, and asked me if i could somehow upload WAV instead.

    Well it ‘seems’ that is now possible but can you imagine the bandwidth? That site alone burns about 1Gb in mp3 download a month, Imagine then wave format = 10Gb? Also not sure whether the *audio* tag is consistent across browsers.

    Also I think he is being a bit fussy, but then what do I know – each time I visit his website (it’s btw) and listen to his songs I am amased at the superb quality of production; and truly can’t hear anything wrong with the track! But maybe I could be tone deaf! :P

    June 7th, 2010 at 05:52

  33. Stephen Donner

    Links are now broken :-(

    July 13th, 2010 at 00:27

Comments are closed for this article.