how to access the ReadableStream inside of the body of the Promise response

Question

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?

Answer 1

I found the answer here: How to access the value of a promise?

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