jsmad
What, Why, How?

Amos Wenger
Oct 2, 2011

jsmad.org

What?

A pure JavaScript MP3 decoder

How do we play music on the web?

The uncle you wish you never had

Flash 10 penetration

Source: adobe.com

Adobe Flash Player has ‘critical’ security issue, won’t be addressed until next week
digitaltrends.com
16 month-old bug continues to crash Flash
tuaw.com
Flash has [...] one of the worst security records in 2009. It is the number one reason Macs crash.
Steve Jobs

The slightly clueless kid on the blocks.

The second best reason to buy an i7

What?

A port of libmad

libmad - a clean-room high-quality GPL'ed MP3 decoder

A port of libmad to JavaScript that allows MP3 playback in browsers without any external plug-ins.
libmad has 24-bit PCM output, does 32-bit fixed point arithmetic, & is fully ISO/IEC 11172 compliant

jsmad uses floating-point arithmetic, and has not been tested for ISO/IEC compliance.

Why?

The patent situation

We have patents on the psycho-acoustic models underlying MPEG-1 Layer III audio encoding.
Fraunhofer & Thomson
You have to pay us money if you use MP3 encoders or decoders in for-profit software.
Fraunhofer & Thomson
La la la can't hear you
every streaming website
OGG MP3 AAC WAV
IE 9
Firefox 5
Chrome 12
Safari 5
Opera 11.5
Source: scirra.com
Firefox, Y U NO support MP3?
every web developer
We don't want to encourage proprietary formats
Mozilla
There, take a sticker and stop asking questions.
Mozilla
Sorry, we don't do stickers.
Opera
MP3 is rubbish anyway!
Anonymous
Yeah, yeah, I encode MP3 alright.
iTunes
We developed our own psycho-acoustic models.
LAME

Why?

Features

What do you mean, seeking?
HTML5 audio

Seeking beyond the buffer has worked for ages
Adobe Flash

What do you mean, live?
HTML5 audio

RTMP solved this years ago
Adobe Flash

What do you mean, SFX?
HTML5 audio

Ever played a Flash game?
Adobe Flash

I decode MP3 streams without making assumptions about your container.
jsmad

How?

How audio compression works

How?

How HTML5 <audio> works

HTML5 <audio>

<audio src="somesong.mp3">
  Oh, wow, what are you using, Lynx?
</audio>

HTML5 <audio>

<audio>
  <source src='somesong.mp3'>
  <source src='somesong.ogg'>
</audio>

What HTML5 <audio> does for you

What HTML5 <audio> does for you

What jsmad does

What jsmad.org runs

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);
  }
});
  

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

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

How

Low-level audio APIs

JavaScript is fast enough
Just give us low-level access to devices, we'll handle it from there.
Why not polyfill <audio> ?

Thank you!