Mozilla

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

jai

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

33 comments

Comments are now closed.

  1. Elijah Grey wrote on June 16th, 2009 at 18:57:

    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?

  2. Garbled wrote on June 16th, 2009 at 19:06:

    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.
    http://musicplayer.sourceforge.net/

  3. Boris wrote on June 16th, 2009 at 20:33:

    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.

  4. Aaron Train wrote on June 16th, 2009 at 23:14:

    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!

  5. Pingback from 颠覆网络35天 ─ HTML 5范儿的音频播放器 < MJiA on June 17th, 2009 at 01:19:

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

  6. Ken Saunders wrote on June 17th, 2009 at 02:40:

    Too damn cool!

    404 on this though.
    http://hyper-metrix.com/misc/jai/jai_javascript-audio-interface.zip

  7. Christopher Blizzard wrote on June 17th, 2009 at 05:43:

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

  8. @F1LT3R wrote on June 17th, 2009 at 06:23:

    @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). http://processingjs.org. 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();

  9. Pingback from nitot's status on Wednesday, 17-Jun-09 14:07:45 UTC - Identi.ca on June 17th, 2009 at 07:07:

    [...] Audio Player using <audio>, <canvas> and <svg>. Soon in a Firefox 3.5 near you! http://hacks.mozilla.org/2009/06/audio-player-html5/ [...]

  10. Timon wrote on June 18th, 2009 at 02:09:

    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

  11. thinsoldier wrote on June 19th, 2009 at 18:26:

    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?

  12. Al wrote on June 19th, 2009 at 19:24:

    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.

  13. BobChao wrote on June 19th, 2009 at 22:03:

    another AUDIO demo: http://moztw.org/demo/audioplayer/

  14. Garbled wrote on June 20th, 2009 at 12:01:

    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.

  15. Al wrote on June 20th, 2009 at 12:07:

    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.

    Synthesis.

  16. Pingback from Encephalosponge » Back to the roots of Firefox on June 21st, 2009 at 22:06:

    [...] 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 [...]

  17. bohwaz wrote on June 28th, 2009 at 04:10:

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

  18. Trackback from soma withdrawal on September 14th, 2009 at 07:02:

    fda soma 250 mg…

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

  19. Trackback from tramadol prescription on September 14th, 2009 at 07:04:

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

  20. Trackback from akane soma lasvegas on September 14th, 2009 at 07:05:

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

  21. Trackback from feline panleukopenia tamiflu on September 14th, 2009 at 07:07:

    tamiflu didn’t cure…

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

  22. Trackback from tamiflu cystic fibrosis on September 14th, 2009 at 07:08:

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

  23. Trackback from vicodin snorted crushed on September 14th, 2009 at 07:17:

    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…

  24. Trackback from online soma on September 14th, 2009 at 07:20:

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

  25. Trackback from what is the action of tamiflu on September 14th, 2009 at 07:22:

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

  26. Trackback from soma cod on September 14th, 2009 at 07:23:

    soma cafe…

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

  27. Trackback from next day soma on September 14th, 2009 at 07:55:

    soma muscle relaxer…

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

  28. Trackback from soma silk on September 14th, 2009 at 10:49:

    soma bicycles…

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

  29. Trackback from tamiflu deaths on September 14th, 2009 at 12:01:

    canine tamiflu…

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

  30. Trackback from soma carisoprodol online on September 14th, 2009 at 12:05:

    soma without a prescription…

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

  31. fearphage wrote on February 18th, 2010 at 12:56:

    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:
    http://dl.dropbox.com/u/2400/mirror/jai/jai-x.htm

    Here’s a version with the code cleaned and redundancies removed:
    http://dl.dropbox.com/u/2400/mirror/jai/jai-my.htm

    All changes are in the respective jai.js files.

  32. Henry Gilbert wrote on June 7th, 2010 at 05:52:

    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 whitelightproduction.com 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

  33. Stephen Donner wrote on July 13th, 2010 at 00:27:

    Links are now broken :-(

Comments are closed for this article.