Connect analyzer to Howler sound

Question

I have been trying for a while to connect an analyser to a Howler sound without any success.

I create my Howler sound like this:

var sound = new Howl({
    urls: [
        '/media/sounds/genesis.mp3',
    ]
});

And then I create my analyser using Howler global context like this:

var ctx = Howler.ctx;
var analyser = ctx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(dataArray);

I am quite new to the web audio API. I think I am missing a connection somewhere but I don't know to what I have to connect it in Howler.

Answer 1

Web Audio uses a sequence of "nodes" to connect a source file to a destination, and an analyser is a type of node that can exist along the route (here's a great overview). To get an analyser in the Howler flow, you need to insert it into the node sequence that Howler has created. Fortunately, Howler exposes the core elements of its node sequence.

The simplest use case would be to create an analyser for ALL of Howler's audio output, aka the "master". Every Howl, plugin, and distortion node in Howler flows through the masterGain node, which connects directly to the destination node. That's where we'll put our analyser.

// Create an analyser node in the Howler WebAudio context
var analyser = Howler.ctx.createAnalyser();

// Connect the masterGain -> analyser (disconnecting masterGain -> destination)
Howler.masterGain.connect(analyser);

// Connect the analyser -> destination
analyser.connect(Howler.ctx.destination);

*Edit (2018-04-25): It seems that reconnecting the analyzer to the original howler destination is not currently necessary, and in fact causes severe sound quality issues. The final line should be ommitted.

Now your analyser is connected to Howler and anything that Howler plays will be available through analyser.getByteTimeDomainData(dataArray), et cetera. From here you can run any analyser/visualization methods you want, I started with these.