Using fetch for srcing the audio requires downloading the full track before playing

[simonv3]

Using fetch for srcing the audio requires downloading the full track before playing. This causes significant lag between songs and after pressing play.

We do this because we need to send headers on the request to be able to skip CORS and get the full track length. Wonder if there's a way of using the webaudio api to get around this?

https://www.html5rocks.com/en/tutorials/webaudio/intro/

https://middleearmedia.com/web-audio-api-bufferloader/

https://stackoverflow.com/questions/66154042/using-readablestream-as-html-audio-source

https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

https://apiko.com/blog/audio-file-streaming-in-js/

This seems like the most solid intro overview https://stackoverflow.com/questions/52667708/play-audio-from-partial-response-and-save-the-buffer-once-complete, and this one provides important context too https://stackoverflow.com/questions/20134384/web-audio-api-how-to-play-a-stream-of-mp3-chunks

Here's some history on the status of this as a standard WebAudio/web-audio-api#337

[simonv3]

howler was promising but it only does streaming support with audio tags, which means that it can't do xhr goldfire/howler.js#1134

[simonv3]

phonogram seems worth exploring but it doesn't look like it allows you to set headers on the fetch request. https://github.com/Rich-Harris/phonograph