Multiple Audio players and the web audio API

Question

I have a system that has has the potential to load in load of audio players into a carousel. I have made use of the web audio api to provide a EQ visual effect behind the player, this is all working fine... however, its in playing with this that I have realised that you can only have a limited number of audio Contexts at once (usually around 6), in creating one audio context and using that I then have the snag of only having one media element source to use, meaning I can get this to work on one player only.

What I would like to know is if there is away I can have one context but have it change the audio source depending on what audio player is playing at the time.

Below is my code:

$('audio').each(function(){

var frequencyData, bar_x, bar_width, bar_height, bars;

// the below ctx I can take out of here and make it global but then it will only accept one mediaElementSource which I need to change per audio player

var ctx = new AudioContext();
var canvas = $(this).find('canvas')[0];
var context = canvas.getContext('2d');
var audio = $(this).find('audio')[0];
var audioSrc = ctx.createMediaElementSource(audio);
var analyser = ctx.createAnalyser();
var img = $('#bwkzLogo img')[0];
// set the canvas height and width based on the size of its container
canvas.width = $('.item.active .bwkz-audio-wrapper').width();
canvas.height = $('.item.active .bwkz-audio-wrapper').height();

audioSrc.connect(analyser);
analyser.connect(ctx.destination);

function loopBars(){
    var grad = context.createLinearGradient(0,0,0,300)
    grad.addColorStop(1, '#000');
    grad.addColorStop(0, '#fff');
    requestAnimationFrame(loopBars);
    frequencyData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(frequencyData);
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.strokeStyle = grad;
    bars = 250; // set to a high value so the bars fill the fill canvas
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(frequencyData[i] / 2);
    }
    loopBars();
}

});

I've been looking into the AudioBufferSourceNode but not sure exactly in this context how I can get this to work.

So I basically add in the audio players in to a carousel. On each slide of the carousel I want the canvas to show the audio bars for the slides specific audio.

Any ideas on this would be an awesome to put me in the right direction.

Kilian Hertel Kilian Hertel · Accepted Answer · 2016-04-24T09:01:15

Your direction is quite right already. Just check which audio player is selected at the moment and change the audio player analyzed by the analyzer. So when you turn the caroussel you get the id of the selected audio player, disconnect the old player and connect the new player to the context. In fact your audio source you are working with already is kind of a audioBufferSourceNode. You can have as many MediaElemetSources as you like. So just connect and disconnect them when needed. You can disconnect just with element.disconnect() or see here https://developer.mozilla.org/en-US/docs/Web/API/AudioNode/disconnect

Multiple Audio players and the web audio API

1 Answers