Retrieve mp3 file from cache and play it in browser

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 Content-Type 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 responsePromise = cache.match(request);
 responsePromise.then(result => {
    console.log(result.body)
    this.audio = new Audio(result.body);

    const playPromise = this.audio.play();
      playPromise.then(function() {
         console.log('success!')
      }).catch(function(error) {
          console.log(error)
      }.bind(this), false);
 });

})

This is the output of console.log(result.body) :

After loading the mp3 file with new Audio(result.body) I try to play the file with this.audio.play() but this results in an error:

DOMException: Failed to load because no supported source was found.

How can I retrieve the mp3 file from cache and play it in the browser?

Answer 1

You have to call reader.read()

caches.open("my-cache").then(cache => {
 const responsePromise = cache.match(request);
 responsePromise.then(result => {
    var reader = result.body.getReader();
    reader.read().then((result) => {
        const mimeType = 'audio/mpeg'
        const url = URL.createObjectURL(new Blob([result.value.buffer], {type: mimeType}))
        this.audio = new Audio(url);
        const playPromise = this.audio.play();
        playPromise.then(function() {
           console.log('success!')
        }).catch(function(error) {
            console.log(error)
        }.bind(this), false);
      }); 

 });

});