HTML5 中的音频数据流 [英] Audio data streaming in HTML5

问题描述

我正在以小块的形式从服务器接收 PCM 音频数据，并将它们存储在一个数组中.现在我想使用一些 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. 带有 数据 URI
的 HTML5 音频标签
2. 网络音频 API

在我研究这些选项时，请向我建议任何其他选项或对我正在查看的两个选项的看法.虽然跨平台解决方案将是最好的，但我可以满足于 Chrome 唯一的解决方案

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

推荐答案

安排音频是 Web Audio API 的设计目标.如果您将解码的 PCM 音频块作为类型化数组 (AUDIO_CHUNKS)，您可以为每个块创建音频缓冲区，并使用 noteOn().类似的东西:

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

这篇关于HTML5 中的音频数据流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！