I have an mp3 file that I am caching as such:

const request = URL_TO_MY_MP3_FILE
caches.open("my-cache").then(cache => {
   cache.add(request);
});

I can see that the mp3 file is being cached in the Application tab:

By the way, how do I ensure that file is cached as audio/mp3 and not audio/mpeg?

Later on, I would like to retrieve the mp3 file from cache so I can play it in the browser:

caches.open("my-cache").then(cache => {
     const response = cache.match(request);
     console.log(request, response);
     this.audio = new Audio(response.body);
})

My first question is how to access the ReadableStream inside of the body of the Promise response. Unfortunately, response.body is equal to undefined and I don't understand how to access the mp3 file otherwise.

Secondly, how do I ensure that file is cached as audio/mp3 and not audio/mpeg?