merge multiple audio buffer sources

Question

Question about html5 webaudio: is it possible to merge multiple songs together?

I have different tracks that are all played at the same time using webaudio but I need to process the audio so I need all the audio inside one buffer in stead of each of the tracks having it's own buffer.

i've tried merging them by adding their channel data but I always get "Uncaught RangeError: Index is out of range. "

function mergeBuffers(recBuffers, recLength){

  var result = new Float32Array(recLength*2);
  var offset = 0;
  for (var i = 0; i < recBuffers.length; i++){
    result.set(recBuffers[0], offset);
    offset += recBuffers[0].length;
  }
  return result;
}

var recBuffersL = [];
for (var i=0;i<audioTracks.length; i++)
{
    recBuffersL[i] = audioTracks[i].currentBuffer.getChannelData(0);

}

var recBuffersR = [];
for (var i=0;i<audioTracks.length; i++)
{
    recBuffersR[i] = audioTracks[i].currentBuffer.getChannelData(1);

}


var buffers = [];
buffers.push( mergeBuffers(recBuffersL, recBuffersL.length) );
buffers.push( mergeBuffers(recBuffersR, recBuffersR.length) );

Answer 1

Turns out it is possible: i had to sum the Float32Array

Answer 2

I'd connect the output of both sources to a ScriptProcessorNode and process them in real-time.

Answer 3

You can use an OfflineAudioContext and get the resulting buffer back. That would let you process + merge in faster than realtime.