2011-07-06 138 views
16

我正在以小块接收来自服务器的PCM音频数据并将它们存储在阵列中。现在我想用一些HTML5功能按顺序播放这些音频块。我期待在为“可能”的解决方案有两个选项:音频数据以HTML5流式传输

  1. HTML5音频标签与Data URI
  2. Web audio API

虽然我调查这些选项,请建议我任何其他选项或意见在我看到的两个选项。虽然一个跨平台的解决方案将是最好的,但我能满足于Chrome的唯一的解决办法是

回答

2

选项,因为音频标签不播放原始音频数据(我假设1将可能无法正常工作是你的PCM音频意思数据,还是我错了?)。每个浏览器需要特定的编解码器最重要的是音频标签不可靠地播放没有间隙的东西。

选项2可能有效。网络音频api包含缓冲区,可能会充满原始数据并播放,但我从来没有尝试过。现在最大的缺点是:一个。只有Chrome浏览器b。用户需要通过键入about:flags并启用Web Audio来配置chrome,这对于某些人来说可能是可怕的。

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

请不要说,我给这些答案在我头上,我还是很新的HTML5音频。

+1

你是不是在播放原始PCM,但WAV文件是一个非常薄的包装原始音频(其中“包装”意味着44字节的标题)。经常这样做。但是现在,当然,2年后,网络音频API似乎是更好的选择。 –

19

计划音频是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; 
}