Web Audio streaming with fetch API

web-audio-fetch-stream.js

// lot from http://stackoverflow.com/questions/20475982/choppy-inaudible-playback-with-chunked-audio-through-web-audio-api


var context = new (window.AudioContext || window.webkitAudioContext)();

// use some CORS-enabled srv
var url = 'http://www.metadecks.org/software/sweep/audio/demos/beats1.wav?adazdaz'

var delayTime = 0;
var init = 0;
var audioStack = [];
var nextTime = 0;

fetch(url).then(function(response) {
  var reader = response.body.getReader();
  console.log('fetch');
  function read() {
    return reader.read().then(({ value, done })=> {
      context.decodeAudioData(value.buffer, function(buffer) {
            audioStack.push(buffer);
            if ((init!=0) || (audioStack.length > 5)) {
                init++;
                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;  // latency
        source.start(nextTime);
        nextTime+=source.buffer.duration; // Make the next buffer wait the length of the last buffer before being played
    };
}

Hi! Could you please help me to understand why the audio-file streams with latency?
I tryed to set this up https://gist.github.com/revolunet/e620e2c532b7144c62768a36b8b96da2/7351c145416c8fd12044f9eb82ecb3ca3d40a5d1#file-web-audio-fetch-stream-js-L45 but it doesn't works. :(

What do you mean doesn't work ?

Can you make à jsfiddle ?

Btw updates code at https://github.com/revolunet/webaudio-wav-stream-player

Not to confuse everyone,
reader.read().then( { value, done } ) expects 'value' to be of type Uint8Array according to body.getReader() docs, so it's not meant to have 'buffer' key.
So check it's type before trying to access it's props.

I am getting Unable to decode audio data.

I'm getting Uncaught (in promise) DOMException: Unable to decode audio data using your code in Chrome console on http://www.metadecks.org/

I think that decodeAudioData cannot be called without audio header. So the first chunk is decoded, because it has the wav header readed from file, next chunks ( raw pcm in this case ) fails to decode because of the missing header.

I tried your example，I also found that "decodeAudioData" cannot be called without audio header，So your example is problematic.

read() can be improved:

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

Otherwise I get a undefined error

It works on Chrome but not Firefox. The error on firefox: TypeError: response.body is undefined.

Also, how do we pause this?

I'm getting Uncaught (in promise) DOMException: Unable to decode audio data using your code in Chrome console on http://www.metadecks.org/

were you able to solve this?

any update i am also getting the same issue in firefox ?