Use incomplete browser fetch request in video/audio element

Question

I have some code like this:

fetch(audioSRC).then(response => {
  return new Response( new ReadableStream({
    start(controller) {
      const reader = response.body.getReader();
      read(); function read() {
        reader.read().then(({done, value}) => {
          if (done) {
            controller.close();
           return;
          }
          read();
         })
       }
     }
   })
  );
 }).then(response => response.blob()).then(blob => {
   let vid = URL.createObjectURL(blob);
      player.src = vid;
    })

i was wondering if it is possible to take this stream while it's incomplete, and play what IS downloaded in the video/audio element before the download is complete? If there is a way to do it smoothly, it would be good so that the user doesn't have to wait until it's fully downloaded.

Answer 1

It works with https://developer.mozilla.org/en-US/docs/Web/API/MediaSource After hours of experimenting, found a half-working solution: https://stackoverflow.com/a/68778572/11979842