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

问题描述

我正在尝试使用 Chrome 51 播放来自 fetch 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: Unable to decode audio data"

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 使用分块音频播放听不见

知道是否可以使其与 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 魔术和 paquet 排序检查；

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 上运行良好:https://github.com/revolunet/webaudio-wav-stream-player

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+ 上使用一些配置标志:https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader#Browser_compatibility

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

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