I'm using the zip-stream library (essentially a custom ReadableStream) to stream zip files to StreamSaver.js

I'm having trouble figuring out how to pipe data from an XMLHttpRequest into this readable stream.

I was thinking of something like this (pseudo code):

var xhr = new XMLHttpRequest();
for(url in urls) {
    xhr.open('GET', url, true)
    xhr.responseType = 'arraybuffer';
    xhr.onload = () => {
        if(xhr.status == 200) {
            ArbitraryGetDataFunction(xhr.response).then(function (data) {
                let arr = new Uint8Array(data)
                //somehow pipe arr into ReadableStream
            }
        }
    }   
}

I'm new to ReadableStreams (and js in general), and most examples of using ReadableStreams have the stream initialized with a start or pull function that already 'knows' what data is being streamed when initialized, like this example given by the zip-stream author:

const readableZipStream = new ZIP({
          start (ctrl) {
            ctrl.enqueue(file1)
            ctrl.enqueue(file2)
            ctrl.enqueue(file3)
            ctrl.enqueue({name: 'streamsaver-zip-example/empty folder', directory: true})
            // ctrl.close()
          },
          async pull (ctrl) {
            // Gets executed everytime zip.js asks for more data
            const url = 'https://d8d913s460fub.cloudfront.net/videoserver/cat-test-video-320x240.mp4'
            const res = await fetch(url)
            const stream = () => res.body
            const name = 'streamsaver-zip-example/cat.mp4'

            ctrl.enqueue({ name, stream })
              
            // if (done adding all files)
            ctrl.close()
          }
        })

However, I want to create the ReadableStream object BEFORE the XHR is processed. If this is not possible using ReadableStreams, what other method can I use?