CODEWITHSUNDEEP
howler.js
Stephen
Stephen

Reputation: 803

Multiple Visualizations with Howler.js

I have multiple tracks playing simultaneously and I want to show each tracks volume level independently in the form of a volume meter.

I have the visualization working from the Master Gain within Howler, but I am unsure of how to connect an analyser to each separate track.

I currently have the following:

// Create analyzer
const analyser = Howler.ctx.createAnalyser();

// Connect master gain to analyzer
Howler.masterGain.connect(analyser);

// Connect analyzer to destination
analyser.connect(Howler.ctx.destination);

What I would like would be something like the following:

let track1 = new Howl({
    src: ['track-1.mp3']
});

let track2 = new Howl({
    src: ['track-2.mp3']
});


// Create analyzer Track 1
const analyserTrack1 = Howler.ctx.createAnalyser();

// Connect Track 1 to analyser
track1.gain.connect(analyserTrack1);

// Create analyzer Track 2
const analyserTrack2 = Howler.ctx.createAnalyser();

// Connect Track 2 to analyser
track2.gain.connect(analyserTrack2);

All examples I have found only reference using the Master Gain. Any help pointing me in the right direction would be appreciated.

Upvotes: 0

Views: 169

Answers (1)

Koen Rijpstra
Koen Rijpstra

Reputation: 354

Yes, you can do it by directly connecting the node:

let track1 = new Howl({
    src: ['track-1.mp3']
});

let track2 = new Howl({
    src: ['track-2.mp3']
});


// Create analyzer Track 1
const analyserTrack1 = Howler.ctx.createAnalyser();

// Connect Track 1 to analyser
track1._sounds[0]._node.connect(analyserTrack1);

// Create analyzer Track 2
const analyserTrack2 = Howler.ctx.createAnalyser();

// Connect Track 2 to analyser
track2._sounds[0]._node.connect(analyserTrack2);

Upvotes: 1

Related Questions