WebAudio streaming with fetch：DOMException：无法解码音频数据

Question

我正在尝试使用 Chrome 51 播放来自提取 API 的无限流。（网络摄像头音频流，如 Microsoft PCM，16 位，单声道 11025 Hz）

除了一些小故障外，该代码几乎可以与 mp3s 文件一起使用，但由于某些原因我得到 "DOMException: Unable to decode audio data"

，它对 wav 文件根本不起作用

代码改编自这个答案Choppy/inaudible playback with chunked audio through Web Audio API

是否可以让它与 WAV 流一起工作？

function play(url) {
  var context = new (window.AudioContext || window.webkitAudioContext)();
  var audioStack = [];
  var nextTime = 0;

  fetch(url).then(function(response) {
    var reader = response.body.getReader();
    function read() {
      return reader.read().then(({ value, done })=> {
        context.decodeAudioData(value.buffer, function(buffer) {
          audioStack.push(buffer);
          if (audioStack.length) {
              scheduleBuffers();
          }
        }, function(err) {
          console.log("err(decodeAudioData): "+err);
        });
        if (done) {
          console.log('done');
          return;
        }
        read()
      });
    }
    read();
  })

  function scheduleBuffers() {
      while ( audioStack.length) {
          var buffer    = audioStack.shift();
          var source    = context.createBufferSource();
          source.buffer = buffer;
          source.connect(context.destination);
          if (nextTime == 0)
              nextTime = context.currentTime + 0.01;  /// add 50ms latency to work well across systems - tune this if you like
          source.start(nextTime);
          nextTime += source.buffer.duration; // Make the next buffer wait the length of the last buffer before being played
      };
  }
}

只需使用 play('/path/to/mp3') 来测试代码。（服务器需要启用 CORS，或者位于您的运行脚本所在的同一域中）

Answer 1

AudioContext.decodeAudioData 只是不是为了解码部分文件而设计的；它适用于 "short"（但完整）文件。由于 MP3 的分块设计，它有时适用于 MP3 流，但不适用于 WAV 文件。在这种情况下，您需要实现自己的解码器。

Answer 2

使 wav 流听起来正确意味着按照 Raymond 的建议将 WAV headers 添加到块中，加上一些 webaudio 魔术和 paquet 排序检查；

一些很酷的人帮我设置了那个模块来处理这个问题，它在 Chrome 上运行得很好：https://github.com/revolunet/webaudio-wav-stream-player

现在可以在 Firefox 57+ 上使用一些配置标志：https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader#Browser_compatibility

WebAudio streaming with fetch：DOMException：无法解码音频数据

WebAudio streaming with fetch : DOMException: Unable to decode audio data

audio

streaming

google-chrome

fetch

web-audio-api