Vue dispaly audio file fetched from Express backend: audio/mp3

express endpoint:

app.get('/test', (request, response) =>  {
    response.sendFile("/absolute/path/to/file/myfile.mp3");
});

Test.vue:

<template>
  <div>
    <p>test {{text}}</p>
    <audio controls="controls" src="./myfile.mp3">

    </audio>
  </div>

</template>

<script>

import axios from "axios";

export default {
  name: 'Test',

  data: function ()  {
    return  {
      text: 'hello',
      audio: ""
    }
  },

  created() {
    this.$watch(
        () => this.$route.params,
        () => {
          alert("fetching")
          this.fetchData()
        },
        
        { immediate: true }
    )
  },

  methods:  {
    fetchData()  {
      axios.get('http://localhost:3000/test',
          {
            params: {

            }
          })
          .then((response) => {
             alert("done")
             alert(JSON.stringify(response));

             const url = URL.createObjectURL(response);


             alert(url);
          });
    }
  }
}
</script>

When I load the Test.vue I get:

first alert:

second alert:

third alert:

and then the page appears:

I know I need to connect the received response from express to the <audio> element, but I’m not sure how. And I noticed that alert(url) is never displayed (no alert window appears).

Express is at localhost:3000 and Vue is at localhost:8080. When I go to http://localhost:3000/test, I get the page with the playable audio file: