Audio data streaming in HTML5

问题:

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

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

回答2:

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.