I can make a spectrum analyzer in my sleep, and browsers can do some audio stuff these days, right? So, maybe?

I can make a spectrum analyzer in my sleep

Here’s how you make a spectrum analyzer. First, run your original signal through a few parallel bandpass filters. The range of human hearing spans about 10 octaves, from 20 Hz to 20k. If we want a 5-band display, we’ll place our bandpass filters at 2-octave intervals. This gives us centers at 40 Hz, 160 Hz, 640 Hz, 2.5k, and 10k.

Filter design is super interesting and fairly complex, but implementing a basic bandpass filter is shockingly simple.

Now we’ve got five (or whatever) new audio signals. We compute the power of each band and draw a bar for each one. There are some details around how you compute the actual size of the bars to make them look good, but that’s the main idea.

Easy! NEXT

Browsers can do some audio stuff these days, right?

Yes, but with difficulty. Dropping in an audio player is straightforward with the audio tag. Codecs are a bit muddled– Firefox won’t play MP3; Safari won’t play Vorbis. But in the grand scheme of browser quirks, this one is charmingly easy to deal with.

Here’s how you implement it:

<audio controls preload="auto">
<source src="/spectest/metal_star.ogg">
<source src="/spectest/metal_star.mp3">
</audio>

We specify both sources so that all browsers can play at least one. And presto:

This is cute, but to add a spectrum analyzer to our player, we need access to the raw PCM stream. The problem is thorny.

In Firefox

Firefox’s Audio Data API makes it easy. Your audio element will fire a MozAudioAvailable event for each little chunk of sound it plays. Create an event listener, and your callback can process the stream however you like. Like this (I use Cobra cause I like it):

var Biquad = new Cobra.Class({
  __init__: function(self, freq, q) {
    var omega = 2*Math.PI*freq/44100.0;
    var alpha = Math.sin(omega)*(2*q);

    self.b0 = alpha;
    self.b1 = 0.0;
    self.b2 = -alpha;
    self.a0 = 1 + alpha;
    self.a1 = -2*Math.cos(omega);
    self.a2 = 1 - alpha;

    self.y1 = self.y2 = self.x1 = self.x2 = 0.0;
  },

  next: function(self, x) {
    var y = (self.b0 / self.a0)*x +
      (self.b1 / self.a0)*self.x1 +
      (self.b2 / self.a0)*self.x2 -
      (self.a1 / self.a0)*self.y1 -
      (self.a2 / self.a0)*self.y2;
    self.y2 = self.y1;
    self.y1 = y;
    self.x2 = self.x1;
    self.x1 = x;
    return y;
  }
});

var bands = [
  new Biquad(40.0, 1.0),
  new Biquad(160.0, 1.0),
  new Biquad(640.0, 1.0),
  new Biquad(2560.0, 1.0),
  new Biquad(10240.0, 1.0)
];

function updateSpectrum(ev) {
  var fb = ev.frameBuffer;
  var sumsq = [0.0, 0.0, 0.0, 0.0, 0.0];

  for (var i = 0; i < fb.length/2; ++i) {
    /* average to get mono channel */
    var center = (fb[2*i] + fb[2*i+1])/2.0;

    /* feed to bp filters */
    for (var j = 0; j < 5; ++j) {
      var out = bands[j].next(center);
      sumsq[j] += out*out;
    }
  }

  for (var i = 0; i < 5; ++i) {
    /* calculate rms power */
    var rms = Math.sqrt(2.0 * sumsq[i] / fb.length);

    /* update bar */
    var db = 6.0 * Math.log(rms) / Math.log(2.0);
    var length = 450 + 10.0*db;
    if (length < 1) {
      length = 1;
    }
    var bar = document.getElementById("bar" + i);
    bar.style.width = length + "px";
  }
}

var audio = document.getElementById("player");
audio.addEventListener("MozAudioAvailable", updateSpectrum, false);

You can see it in action here.

Brilliant! Hopefully WebKit provides an equally easy solution.

In WebKit

Nope! WebKit is implementing the Web Audio API. This API sorta works like a modular. You create chains of AudioNode objects which act as sound sources or processors. There are a bunch of prefab AudioNodes, or you can write your own.

Chrome implements at least part of the Web Audio API. So do Safari nightlies, and I presume Safari 6 will as well.

My plan was to connect an audio element to a custom AudioNode, which would use the same spectrum analyzer code from the Firefox example. This plan was foiled when I discovered that the MediaElementAudioSourceNode, designed to provide integration with the audio and video tags, is silently unimplemented in Chrome. You can create one, but it will just feed you a steady stream of zeroes.

For now, it appears that the preferred solution is to re-implement the audio tag yourself using an XHR and an AudioBufferSource. Which is insane.

Our updateSpectrum only changes slightly:

function updateSpectrum(ev) {
  var fb = ev.inputBuffer;
  var outb = ev.outputBuffer;
  var sumsq = [0.0, 0.0, 0.0, 0.0, 0.0];
  var inputL = fb.getChannelData(0);
  var inputR = fb.getChannelData(1);
  var outputL = outb.getChannelData(0);
  var outputR = outb.getChannelData(1);

  for (var i = 0; i < inputL.length; ++i) {
    /* average to get mono channel */
    var center = (inputL[i] + inputR[i])/2.0;

    /* copy to output */
    outputL[i] = inputL[i];
    outputR[i] = outputR[i];

    /* feed to bp filters */
    for (var j = 0; j < 5; ++j) {
      var out = bands[j].next(center);
      sumsq[j] += out*out;
    }
  }

  for (var i = 0; i < 5; ++i) {
    /* calculate rms amplitude */
    var rms = Math.sqrt(sumsq[i] / inputL.length);

    /* update bar */
    var db = 6.0 * Math.log(rms) / Math.log(2.0);
    var length = 450 + 10.0*db;
    if (length < 1) {
      length = 1;
    }
    var bar = document.getElementById("bar" + i);
    bar.style.width = length + "px";
  }
}

But we need a bunch of new rigmarole to wire up the sound:

var context = new webkitAudioContext();

var processor = context.createJavaScriptNode(512, 1, 1);
processor.onaudioprocess = updateSpectrum;

/* get the sound via http */
var req = new XMLHttpRequest();
req.open("GET", "/spectest/metal_star.mp3", true);
req.responseType = "arraybuffer";
req.onload = function() {
  var audio = context.createBuffer(req.response, false);
  var source = context.createBufferSource();
  source.buffer = audio;
  source.noteOn(0.0);
  source.connect(processor);
  processor.connect(context.destination);
}
req.send();

And here’s the Chrome edition of the demo (warning: autoplays).

Opinions

I quite like the Mozilla Audio Data API. The Web Audio API strikes me as overdesigned.

I hate Flash with the fury of a thousand suns scorned, but given this Byzantine thicket, I understand why developers use it.

Also

If you like the song in the demos, download it here.

www.youtube.com/watch?v=xXdJaIce8vI

(link in case the player doesn’t show up in your reader)

Share and enjoy!

Obviously the best way to achieve this would be to tune and mic the drums in the 50s style. But in reality, we have a tiny budget; we recorded all the drums basically in one day with no time to adjust things in between songs. So I challenged myself to come up with two ways to mix the same drums and get very different sounds.

The first thing I did was listen to some reference tracks. Like this one:

www.youtube.com/watch?v=c9OcPzjpXnk

Now that song was actually recorded in 1969, and in fact all my reference tracks actually came from the late 60s. Which is fine; I’m after a sound, not a date. At any rate, I took note of a few things:

• The snare is thin and tight.
• The kick has almost no boom, but you can really hear the pedal.
• The hihats are nice and crisp. (In my head the sound was super warm, but that’s not really the case at all. It’s easy to overdo those things, so it was good to check.)

With that in mind I got to work.

I wasn’t alive then, but reading up a bit it seems like close-micing individual drums didn’t become common until the 70s. Basically you’d just throw one mic up in the middle of the room. With that in mind, I attempted to work entirely off the overheads. The first thing I noticed was the overheads were suuuper bright, probably because they were placed so close to the cymbals. Listen:

Download audio file (drums_01_orig.wav.mp3)


I thought a little multiband would help so I fired up Voxengo Drumformer. I set it in two-band mode with the cutoff at 3k. For the lows, I added a moderate amount of compression, but actually only a tiny bit on the highs. I set the cutoff just barely below where the hihat peaks. Mostly I just rolled the high band a lot lower. Even that wasn’t enough so I added a little bit of high shelf as well.

Applying two-band compression to the overheads

Download audio file (drums_02_compressed.wav.mp3)


Now the balance sounds pretty good and I’m liking the way the crash tails fade away. I wanted to add a touch of saturation to give it that retro feel. My favorite tool for this is the Buzz plugin Zu Tube Head, but since I’ve switched to Mac I need to find a new one. I first tried Magnetic from Nomad Factory; it sounded good, but I didn’t really want to drop $129 at the moment. I auditioned a few more before finding Forex from ToneBoosters. The sound is nice and it’s a bargain at under $35 for the whole bundle of plugs.

Download audio file (drums_03_saturated.wav.mp3)


For the last step, I reasoned that recording with a single mic placed farther away, you’d pick up a bit more room, so I added just a hint of reverb to the whole thing. Naturally I used the amazing freebie Ambience by Magnus of Smartelectronix.

Download audio file (drums_04_verb.wav.mp3)


That’s it! The only further processing is to cut a hole for the vocals at 2.8k.

That’s my attempt at a 50s (but really 60s) drum sound. I’m still fiddling with the pop sound, but if I feel inspired I’ll write that up as well.

Goodbye Jerker, hello Besta

The original hacker’s basic idea was to start with a Besta shelf unit, which has all kinds of add-ons. Saw your shelves down a little and mount them on rails from a matching drawer unit. I added a keyboard stand to mine, made out of a wall shelf and some Vika Kaj adjustable table legs. I also installed some Dioder multicolored LEDs, just cause they’re awesome.

The brilliant part is that, while you need to be able to reach all your controllers, you don’t need to reach them all at the same time. You can store them compactly tucked into the unit and just slide out the ones you want.  As awesome as my Jerker desk was, this setup has a significantly smaller footprint while keeping all my gadgets accessible.

If you are considering building this hack yourself, here are some tips:

• Sawing the shelves down to size was surprisingly easy, although it takes a while and my arm got kind of tired. You can use the bottom of the drawer from which you took the rails as a sizing guide– it’s exactly the right width. Since the shelves are fiberboard, the side facing down as you saw is going to get a little ugly, so plan accordingly.
• Mounting the rails on the shelves was slightly more difficult than I anticipated.  First, it’s easy to get confused about how to orient the rails.  Second, it’s a little tricky to drill holes in such a thin piece.
• The most difficult part was installing the other half of the rails into the shelf– it’s really hard to operate a screwdriver around the rear holes. Ironically, this is the part actually sanctioned by Ikea.
• Binder clips can keep your cables neat as you slide stuff in and out.

The new Beatport design is fabulous.

They fixed nearly every problem with the original. It’s made in HTML5 instead of Flash. Text is far more readable. Forward/back buttons and bookmarks work. It uses your browser’s scrolling instead of the proprietary Flash widget scrolling. And although it’s labeled “beta,” it’s far less buggy than the official Flash-based interface.

I should also mention that it’s beautiful: clean, modern, and stylish. Everyone involved with the redesign, you deserve a big old high-five.

There’s an Ableton Live remote script for the Ohm64 kicking around, and it’s pretty good.  But I wanted a slightly different setup, so I created an alternate script.  The basic idea is this: the left is like a DJ mixer.  The middle launches clips.  The right is for effects.

Specifically:

• The faders and knobs on the left control the levels and EQ on the first four tracks.  I wanted dedicated EQ knobs for each track, like a DJ mixer, so I could do tricks like bass swapping.  If you drop an EQ3 on your track, the knobs will map to low/mid/high just like you’d expect.  If you drop in an EQ8, I think they’ll map to the first three EQs.
• The buttons on the left cue the first four tracks, so you can easily cue any combination of tracks.  To enable cuing multiple tracks at once, you need to go to Preferences > Record Warp Launch, find “Exclusive,” and disable “Solo.”
• The knobs and faders on the right control the current selected effect, except for
• The last fader, which controls master volume.  I decided that I needed to adjust master volume more often than I needed all eight controls in a rack.
• The buttons on the right select the active track from the first four tracks.  My reasoning for putting this on the right was so that the light would indicate which track’s effects you’re controlling.
• The first two transport buttons control tempo. The F4 button decreases tempo by 1 BPM and F5 increases tempo.  I never hit start and stop during performance, but I often want to gradually change tempo.

Everything else is the same as the original remote script:

• The grid launches clips.
• The crossfader crossfades.
• The remaining four transport buttons move the active rectangle.

Download the script here: Ohm64DJ.zip

To install:

• Unzip the file.
• Find and open your Live app bundle.
• Go to Contents -> App-Resources -> MIDI Remote Scripts.
• Drop the “Ohm64DJ” directory there.

My alternate remote script shows up as “Ohm64DJ,” so you can keep both around and switch between them as needed.  (It’s actually really annoying to open up preferences in order to switch.)

Since this script controls only four tracks, there are 24 unmapped buttons in the grid, which seems sort of silly.  But I’m sure I’ll come up with something useful for them.

Finally, huge thanks to Michael at Max4live.info and Hanz at _Framework for publishing their scripts and findings.

• Firewire.  This leaves both USB ports free (Apple’s pretty stingy with the connectivity).  Also, I’ve heard rumors that the MacBook Pro underpowers the USB port.  Maybe I’m making this up, but I think the more stringent power requirements for Firewire encourage reliability.
• Balanced TRS outs.  Seems mundane, but lots of portable audio interfaces in this price range have RCA outs, which boggles the mind.
• Independent headphone out, which is crucial for performance.
• Stable drivers– so far at least.  I haven’t had it long, but I’ve used it a lot without a glitch.  Contrast that with the nightmare that was the Audio Kontrol 1 drivers (on that more below)
• Hopelessly sexy packaging. It’s tiny and light with a sturdy yet pretty aluminum case.

Left bad, right good.

Here’s what’s not so awesome:

• 1/8″ headphone jack.  All my headphones are 1/4″.  Every 1/4″ – 1/8″ adapter I’ve ever had fell apart in weeks.  But Grado makes this nice long one; seems like that should relieve some of the strain.
• Awkward breakout cable for MIDI (and S/PDIF, but who uses that?)

It’s early yet, but I’m very happy so far and would recommend the AudioFire2 to any performer.

Some background: I got a Native Instruments Audio Kontrol 1 about four years ago.  Feature-wise, it’s pretty hot, but it’s been total driver hell.  On my old laptop, it tooks weeks of tweaking settings to get it stable; I even had to uninstall my network drivers.  On my new laptop, no amount of tweaking worked. I’d get hard freezes randomly.

Writing application software, which Native is good at, is very dissimilar from writing drivers.  The AK1 was, I believe, Native’s first hardware audio interface.  I guess I should have anticipated some rockiness early on, but after four years of driver updates it’s as bad as ever.  Echo, on the other hand, literally make nothing but audio interfaces.  That was a big factor for me when shopping around.

www.youtube.com/watch?v=svnAGMyNB4A

Information seems to be scarce and in Italian.  I’m not even sure if Suz is the name of the band or the singer.  But I’m quite enjoying this record.