Audio data streaming in HTML5 Audio data streaming in HTML5 google-chrome google-chrome

Audio data streaming in HTML5


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


Option 1 will probably not work because the audio tag doesn't play raw audio data (which I assume is what you mean by PCM audio data, or am I wrong?). Every browser needs specific codecs. To top it of the audio tag is not reliable at all to play things without gaps.

Option 2 might work. The web audio api contains buffers which probably could be filled with raw data and played, but I've never tried doing so. The big drawback right now is that; a. Chrome only b. the user needs to configure chrome by typing about:flags and enable Web Audio which might be scary to some.

A third option would be the Audio Data API which is something of a middle ground. I've never tried it myself, but from the spec it looks like exactly what you're looking for. I dunno about implementations though, so you'd have to do some research on your own :)https://wiki.mozilla.org/Audio_Data_API#Writing_Audio

Please not that I'm giving these answers on top of my head, and I'm still pretty new to HTML5 audio.