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.

Answer 2

You need to connect the node that outputs the audio you want to analyse to the analyser node, and then connect the analyser node to the context destination (or another node). So something like this:

//this is a bufferSource with a decoded buffer that we want to analyse
source.connect(analyser);
analyser.connect(context.destination);

Once you've done that you should be able to start requesting the result of the analysis as per https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode