Mozilla Hacks

JSMad – a JavaScript MP3 decoder

Avatar photo By Chris Heilmann

Posted on June 19, 2011 in Audio and Firefox

It always amazes me just how fast modern browsers and their JavaScript engines are. And how creative people get when trying to make things work inside a browser instead of relying on a plugin that our end users would have to install (and more importantly constantly keep up to date).

JS MAd

The latest thing that make me go “wow” is jsmad (source on GitHub) by Amos Wenger, Jens Nockert and Matthias Georgi. JSMad is an MP3 decoder in JavaScript!

“So what”, you say? Well, having JSMad means that now Firefox can play MP3 files without any Flash. It also means that you can listen to MP3 in the browser without the 64bit issues on Linux. With JSMad we can dive deep into the MP3 format and not only play the song but also get information about it. It allows us to build a lot of native dj-mixers, samplers and sequencers in the nearer future.

Right now JSMad works in Firefox 4+ and on Chrome 13.0+, if you enable the Web Audio API in ‘about:flags’.

I remember when MP3 came out and my computer back then was too slow to encode it without locking up in WinAmp. Back then a scene player also helped me out. Now we do the same inside a browser rather than desktop applications.

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…

25 comments

  1. CAFxX

    Too bad that playback hiccups when the tab isn’t active.

    June 19th, 2011 at 06:22

    1. Amos Wenger

      As Mardeg mentions below, this is a Firefox bug (or rather, a feature).

      We might work around it temporarily by writing more audio buffers than asked for when detecting that the callback is not called often enough.

      Of course, when Audio workers are ready then we’ll switch to that. Until then, just play your mp3s in a separate window :) That works well.

      June 19th, 2011 at 06:30

    2. Bram

      I don’t experience that same issue as you describe. It plays fine whatever I do. How is the CPU usage on your machine?

      June 19th, 2011 at 07:26

      1. Amos Wenger

        In Firefox 4.0.1 the bug is not yet present. I’ve experienced it in Firefox 6.0a2. CPU usage ranges from 6% to 30% for me on Linux, and around 8-10% on Windows (both under Firefox 4)

        June 19th, 2011 at 08:01

  2. Mardeg

    There is of course the issue of using settimeout so many times a second that when the tab loses focus so you can listen to it while in another tab, bug 633421 kicks in and then you get bug 665000, linked in my name.

    Hopefully once bug 615946 (Audio workers) is implemented people can switch to using those.

    June 19th, 2011 at 06:23

  3. x

    I suppose this might still be patent encumbered.

    June 19th, 2011 at 07:18

    1. Amos Wenger

      Probably not, as distributing the *source* of libmad is legal. However, distributing binary codecs (ie. a compiled version of libmad) requires a license from Thomson/Fraunhofer.

      Compiling jsmad’s source code (ie. trying out the demo) qualifies as non-commercial, personal use so it’s alright I guess. I’m not a lawyer though :) We just ported GPLv2 code, we’ll let the legalistas figure it out.

      June 19th, 2011 at 08:07

      1. x

        Will be interesting to know how GPL license apply to javascript used on a webpage.

        June 19th, 2011 at 08:58

  4. pd

    PDF viewing in JS, MP3 decoding in JS. WebGL and maybe WebCL. Fonts in browsers, file management in browsers … increasingly there’s seems very little a browser cannot …

    yet we still can’t play whichever video codec in whichever browser, *sigh*

    It’s a crazy world.

    June 19th, 2011 at 11:20

    1. aa

      with webcl this will be possible (and fast)

      June 19th, 2011 at 13:36

  5. Dheeraj Yadav

    JSMad means that now Firefox can play MP3 files without any Flash.
    How dose this works anyway this is the best solution for a option for using plugins, i am using many plugins for flash and many other media embeding, now i hop this kind of features will help us to remove these plugins.

    June 20th, 2011 at 05:09

  6. Guest

    Just tested the site with FF5, and works perfectly!!
    It even works when you are viewing other tabs, within the same window :)
    great work! thanks!

    June 20th, 2011 at 06:32

  7. Bod

    Does Mozilla have an official position on (or tracking bug for) when it’s going to add mp3 support to the audio tag? I’m guessing that once it’s out of patent protection then there aren’t any other problems. (I know Vorbis is better quality, but the ridiculous installed base of mp3 is an overwhelming argument in my mind, as is the possibility that others will push for AAC to be the de facto standard).

    I’ve seen statements suggesting 8th December 2011 as a possible date for all playback patents being expired (in the US, probably earlier elsewhere). I’ve also seen 8th December 2012 so it would be good to have someone respectable like Mozilla, Wikimedia, Ubuntu or the FSF weigh in on the matter and back up their stance with action.

    I’ve also seen it suggested that if some individual patents still apply then these could be worked around. You might be able to create an mp3 that would play in a future Firefox as well as Flash, Safari, your iPod etc. while still not being able to play any and all random mp3s in Firefox. Slightly confusing for web devs, but better than nothing.

    Cool hack by the way. I was going to suggest Flac would be cool too, but it seems that I/O rather than decode is the bottleneck, so it’s probably not feasible.

    June 20th, 2011 at 07:03

  8. Jared

    Chrome supports MP3 playback already through HTML5. I thought Firefox 4 did as well. I know it supports ogg.

    June 20th, 2011 at 07:47

    1. Kissaki

      It does for OGG as that’s a free and open codec.
      Not for MP3 though, as that one is not.

      June 25th, 2011 at 10:32

  9. Kissaki

    no doc on how to use or embed it yet :(

    June 25th, 2011 at 10:31

  10. Sharon

    Certified 30+ years Master in IBM Microsoft IT Cisco Red Hat Security et al – I found one tiny little problem with this wonderful program if it can be fixed.

    Sorry – I had to uninstall it until this small issue can be fixed; it’s a security breech in the JS encoding. The Plugin itself – actually migrates over to IE9 Browser AND in AOL Browser (heck, I won’t use Google) which creates a problem with the other browsers; I saw this – especially in the Network Monitoring and IE Developer Functionality (Use the IE 9 tab in tool bar and hit the developer tools, enabling it so you can see it – it is actually still running!)

    Great job, but can you tweak it so that the Plug-in does not run all the time? It is ironic because when I use the Sys Internals – it isn’t showing; in addition to the other Programs I have, but thank goodness for that Developer Tools in the IE 9 I would had never caught that!

    Here’s one of my suggestion (Maybe?) on a FireFox toolbar where one can enable and disable (I/O switch) so that those on lower speeds or weaker CPU /GPU’s, horrid DNS Providers, to a simple home user that just does not comprehend the concept or understand any of this “geek-speak”. (Remember, we speak Martian to them – Smile.)

    Having an I/O (on/off) switch ON a FF toolbar in FF 5 and higher – and possibility if they want to activate it in IE 9, you might just made tons of Script Kiddies in IE Bandwagon really upset right there if you smack down with your program and it’s copyrighted (Neener Neener Boo Boo! to them! :P) … MAD!

    By my implications is – the I/O switch would enable people to load such programs first – then enabling your program with the flip of the switch (CRANK IT UP BABY as they would say to a person who has a BOOM BOX – which yours pretty much defines it); this would resolve the “buffering issues”. Turning it off when its not needed, and “Crank it Up Babe” when it is, would really make FF would make Microsoft / Google / AOL and who the heck cares the other browsers …. MAD! :-D

    I found this to actually even work great alongside with Microsoft’s Silverlight / HTML 5 as well.

    BUT ….. there is a Security Issue there that leaves the door of vulnerability wide opened; provisions of clues above should direct you, the Developer where to find it – FIX IT ASAP and you’ve just built yourself a better Mouse Trap and FF better get this program copyrighted ASAP and reward you richly!

    I can picture it – FireFox – the ONLY BROWSER that has the capabilities and flexibilities for everyone – how to use this simple program: would be so easy to understand the I/O switch on their toolbar and how it works. I mean, it isn’t that hard or complicated.

    CONGRATS AND KUDOS TO YOU – YOU’VE GONE WHERE NO MAN HAS BOLDLY GONE BEFORE! (applause)….

    Now just fix that small little “issue” and you’re done! (That is why I had to uninstall it) …

    KEEP US POSTED PLEASE!!!!

    June 29th, 2011 at 07:11

  11. Andres G. Aragoneses

    Any idea when WebAudio API will be enabled by default in the browser?

    August 14th, 2011 at 06:58

    1. Amos Wenger

      Well it is now in Chrome 14 build :)

      August 15th, 2011 at 09:46

  12. Andres G. Aragoneses

    Cool, what about Firefox?

    August 16th, 2011 at 10:38

  13. daniel

    I still haven’t figured out how that is supposed to work, can’t find any documentations or howtos :(

    September 15th, 2011 at 07:59

    1. Amos Wenger

      Yes, documentation is completely lacking at the moment.

      Fortunately, I’ll give a talk about it at jsconf.eu, so I’ll explain in details how it works and how to use it :)

      Meanwhile I’d of course advise you to take a look at jsmad.org’s source code to see how it uses the player – it’s not that complex really, it’s just missing a few more complex things like seeking, etc.

      September 16th, 2011 at 00:43

  14. trusktr

    jsmad along with OpenGL…mmmmmm

    December 8th, 2011 at 20:59

  15. Pithikos

    Doesn’t work here. All I get is tiny choppy segments of sounds on firefox.
    On chrome and epithany I don’t hear anything at all.

    March 21st, 2012 at 05:33

  16. onok

    On firefox i also get choppy playback. I also tried the flac decoder. Also works, but also choppy playback on firefox.
    On Chrome, both the flac and mp3 player work fine.

    October 5th, 2012 at 06:30

Comments are closed for this article.