HTML5 中的音频数据流答案

【问题标题】：Audio data streaming in HTML5HTML5 中的音频数据流
【发布时间】：2011-09-29 10:34:32
【问题描述】：

我从服务器接收小块的 PCM 音频数据，并将它们存储在一个数组中。现在我想使用一些 HTML5 功能连续播放这些音频块而没有间隙。我认为“可能”解决方案的两个选项是：

带有Data URI的HTML5音频标签
Web audio API

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

【问题讨论】：

标签： javascript html google-chrome audio-streaming html5-audio

【解决方案1】：

调度音频是 Web Audio API 的设计目的。如果您将解码的 PCM 音频块作为类型化数组 (AUDIO_CHUNKS)，您可以为每个块创建音频缓冲区，并使用 noteOn() 在准确的时间（一个接一个地）安排它们。比如：

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】：

选项 1 可能不起作用，因为音频标签不播放原始音频数据（我认为这就是您所说的 PCM 音频数据，还是我错了？）。每个浏览器都需要特定的编解码器。最重要的是，音频标签根本不可靠地播放没有间隙的东西。

选项 2 可能有效。网络音频 api 包含可能可以填充原始数据并播放的缓冲区，但我从未尝试过这样做。现在最大的缺点是；一种。仅限 Chrome b.用户需要通过键入 about:flags 来配置 chrome 并启用 Web Audio，这可能会让某些人感到害怕。

第三种选择是音频数据 API，它是一种中间立场。我自己从未尝试过，但从规范来看，它看起来正是您正在寻找的东西。我不知道实现，所以你必须自己做一些研究:) https://wiki.mozilla.org/Audio_Data_API#Writing_Audio

请不要说我是在头脑中给出这些答案，而且我对 HTML5 音频还是很陌生。

【讨论】：

您不播放原始 PCM 是正确的，但 WAV 文件是原始音频的非常薄的包装器（其中“包装器”表示 44 字节标头）。它已经完成了，经常。但是现在，当然，2 年后，网络音频 API 似乎是一个更好的选择。