javascript – Web Audio API: play 2-3 sources simultaneously

Use the Web Audio clock and schedule all sources at the same future timestamp.

Avoid this:

source.start();
source2.start();
source3.start();

Each call happens at a slightly different JS execution time.

Instead, schedule everything using the same startAt value:

startAllSources: function () {
  const ctx = Audiodata.audioContext;
  const startAt = ctx.currentTime + 0.05;

  Audiodata.source.start(startAt);

  Audiodata.currentSources.forEach(source => {
    FX.nodes[source.key].obj.start(startAt);
  });
}

If all sources should start from the same buffer position:

const offset = 0;

Audiodata.source.start(startAt, offset);

Audiodata.currentSources.forEach(source => {
  FX.nodes[source.key].obj.start(startAt, offset);
});

Also note that AudioBufferSourceNode can only be started once. For replay, create a new source node:

const src = ctx.createBufferSource();
src.buffer = buffer;
src.connect(ctx.destination);
src.start(startAt);

For OfflineAudioContext, schedule everything before rendering:

const startAt = 0;

baseSource.start(startAt);
fxSource1.start(startAt);
fxSource2.start(startAt);

const renderedBuffer = await offlineCtx.startRendering();

If you still hear a large delay (e.g. ~0.5s), check whether the audio files contain leading silence. Scheduling can sync start times, but it can’t remove silence already present in the audio.