8

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.

psmears
  • 26,070
  • 4
  • 40
  • 48
arthurmchr
  • 500
  • 2
  • 8
  • 27

2 Answers2

19

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.

John LaRocque
  • 164
  • 1
  • 7
avanwink
  • 314
  • 2
  • 4
-1

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

Oskar Eriksson
  • 2,591
  • 18
  • 32
  • Thanks for your answer @Oskar Eriksson .The problem I have with Howler is that I don't know how to get the `source` element. – arthurmchr Sep 09 '15 at 08:23
  • I would suggest doing something simple with plain webaudio. Use an oscillator as the source. Figure out how to get the analyzer to do what you want. If you have troubles come back here. If you figure it out, then figure out how to get Howler to do what you want. (I don't know anything about Howler.) – Raymond Toy Sep 09 '15 at 20:32