带有获取的WebAudio流:DOMException:无法解码音频数据 [英] WebAudio streaming with fetch : DOMException: Unable to decode audio data

问题描述

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

I'm trying to play an infinite stream coming from the fetch API using Chrome 51. (a webcam audio stream as Microsoft PCM, 16 bit, mono 11025 Hz)

该代码对于mp3s文件几乎可以正常工作，除了一些小故障之外，但是由于某种原因，它对于wav文件根本不起作用，因为我收到"DOMException:无法解码音频数据"

The code works almost OK with mp3s files, except some glitches, but it does not work at all with wav files for some reason i get "DOMException: Unable to decode audio data"

代码是根据以下答案改编的: Choppy/通过Web Audio API用分块音频播放无法听见的声音

The code is adapted from this answer Choppy/inaudible playback with chunked audio through Web Audio API

是否知道是否可以使其与WAV流一起使用?

Any idea if its possible to make it work with WAV streams ?

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，或者与您的运行脚本位于同一域中)

Just use play('/path/to/mp3') to test the code. (the server needs to have CORS enabled, or be on the same domain your run script from)

推荐答案

正确制作wav流意味着按照Raymond的建议将WAV标头添加到块中，并进行一些Webaudio魔术和拼音顺序检查；

Making the wav stream sound correctly implies to add WAV headers to the chunks as Raymond suggested, plus some webaudio magic and paquet ordering checks;

一些很酷的人帮助我设置了该模块来处理该模块，并且该模块在Chrome上运行良好:

Some cool guys helped me to setup that module to handle just that and it works beautifully on Chrome : https://github.com/revolunet/webaudio-wav-stream-player

现在可在Firefox 57+上使用，并在以下位置带有一些配置标志:

Now works on Firefox 57+ with some config flags on : https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader#Browser_compatibility

这篇关于带有获取的WebAudio流:DOMException:无法解码音频数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！