Audio data streaming in HTML5

Question

I am receiving PCM audio data from the server in small chunks and having them stored in an Array. Now I would like to play these audio chunks sequentially without gaps using some HTML5 capability. Two options which I am looking at as 'possible' solutions are:

1. HTML5 Audio tag with Data URI
2. Web audio API

While I am investigating these options, please suggest me any other option or views on the two options I am looking at. Though a cross platform solution will be the best but I can settle for Chrome only solution as

Answer 1

Scheduling audio is something the Web Audio API was designed for. If you have the decoded PCM audio chunks as typed arrays (AUDIO_CHUNKS), you can create audio buffers for each chunk, and schedule them at an exact time (one after the other) using noteOn(). Something like:

var startTime = 0;

for (var i = 0, audioChunk; audioChunk = AUDIO_CHUNKS[i]; ++i) {
  // Create/set audio buffer for each chunk
  var audioBuffer = audioCtx.createBuffer(NUM_CHANNELS, NUM_SAMPLES, SAMPLE_RATE);
  audioBuffer.getChannelData(0).set(audioChunk);

  var source = audioCtx.createBufferSource();
  source.buffer = audioBuffer;
  source.noteOn(startTime);
  source.connect(audioCtx.destination);

  startTime += audioBuffer.duration;
}