Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSMad - What, Why, How (JSConf EU 2012)

JSMad - What, Why, How (JSConf EU 2012)

As part of my work at ofmlabs, I co-developed an MP3 decoder in pure JavaScript. I was kindly invited to present it to JSConf.eu.

Amos Wenger

October 02, 2011
Tweet

More Decks by Amos Wenger

Other Decks in Programming

Transcript

  1. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « Adobe Flash Player

    has 'critical' security issue, won't be addressed until next week » — digitaltrends.com
  2. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « Flash has […]

    one of the worst security records in 2009. It is the number one reason Macs crash. » — Steve Jobs
  3. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « libmad - a

    clean-room high-quality GPL'ed MP3 decoder »
  4. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « A port of

    libmad to JavaScript that allows MP3 playback in browsers without any external plug-ins. »
  5. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « libmad has 24-bit

    PCM output, does 32-bit fxed point arithmetic & is fully ISO/IEC 11172 compliant » — underbit.com
  6. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « jsmad uses foating-point

    arithmetic, and has not been tested for ISO/IEC compliance » — @nddrylliog + @jensnockert
  7. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « We have patents

    on the psycho-acoustic models underlying MPEG-1 Layer III audio encoding. » — Fraunhofer & Thomson
  8. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « You have to

    pay us money if you use MP3 encoders or decoders in for-proft software. » — Fraunhofer & Thomson
  9. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « La la la

    can't hear you. » — Every streaming website
  10. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger OGG MP3 AAC WAV

    IE 9 ✘ ✔ ✔ ✘ Firefox 5 ✔ ✘ ✘ ✔ Chrome 12 ✔ ✔ ✔ ✔ Safari 5 ✘ ✔ ✔ ✔ Opera 11.5 ✔ ✘ ✘ ✔
  11. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « We don't want

    to encourage proprietary formats. » — Mozilla
  12. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « There, take a

    sticker and stop asking questions. » — Mozilla
  13. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « We developed our

    own psycho-acoustic models » — LAME project
  14. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « I decode MP3

    streams without making assumptions about your container. » — jsmad
  15. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger HTML5 <audio> <audio> <source

    src="somesong.mp3"> <source src="somesong.ogg"> </audio>
  16. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger What HTML5 <audio> does

    for you • Data input (fle://, http://) • Buffering (206 Partial Content) • Demuxing (MPEG, OGG, M4A) • Decoding (MP3, Vorbis, AAC) • Audio playback (CoreAudio, PulseAudio) • User interface
  17. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger What HTML5 <audio> does

    for you • Data input • Buffering • Demuxing • Decoding • Audio playback • User interface
  18. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger What jsmad does •

    Data input • Buffering • Demuxing • Decoding • Audio playback • User interface
  19. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger What jsmad.org runs •

    Data input • Buffering • Demuxing • Decoding = jsmad • Audio playback = sink.js • User interface
  20. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger jsmad — decoding all

    frames var file = fileChooser.files[0]; new Mad.FileStream(file, function(input) { var mp3 = new Mad.MP3File(input); var mpeg = mp3.getMpegStream(); var frame = new Mad.Frame(); while (mpeg.error != Mad.Error.BUFLEN) { frame = Mad.Frame.decode(frame); } });
  21. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger sink.js — playing audio

    var channels = 2; // stereo var rate = 44100; // 44.1 Khz var bufsize = 65536 * 4096; function refill(buffer) { // … } var dev = Sink(refill, channels, bufsize, rate);
  22. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger sink.js + jsmad var

    frame = /* … */; var synth = new Mad.Synth(); function refill(buffer) { // if current frame all used up, decode new one frame = Mad.Frame.decode(frame); // synthesize new one if needed synth.frame(frame); // copy samples from synth to buffer // (TypedArray.set or for loop) } var dev = Sink(refill, channels, bufsize, rate);
  23. JSConf EU 2011 github.com/audiocogs/jsmad Amos Wenger « Just give us

    low-level access to devices, we'll handle it from there » — jsmad