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:
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
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;
}