1

I am using express's res.sendFile() to send an .mp3 file from my server to my client as a response to a post request.

I have been unable to transform the string of data (binary, I think?) back into a usable format for my web application. (ideally, use it as an <audio> element).

When I hit this route using Postman, it appears to be working- the 'body' of the response opens up a working audio player within Postman's app (pictured below). This tells me there is no issue server side. In my client code, I've tried to make a new Blob using the data property of my server response, and then use that Blob to source an HTML <audio> element. Here is what that looks like starting from my axios.post() response :

.then((res) => {
  const blob = new Blob([res.data], {type: 'audio/mpeg'})
  sendBlobToAnotherComponent(blob)
})

//== send the blob to the appropriate .jsx element (using React) ==\\

<audio
  controls
  src={URL.createObjectURL(blob)}>
</audio>

I'm fairly confident I am just building this Blob incorrectly but can't figure it out for the life of me! It's infuriating that Postman does this automatically lol... but also give me hope! Thanks for any help :)

e.headers on the response from server in Postman

ea look at my logs of the res.data object and the blob I create

Willy McNamara
  • 11
  • 1

1 Answers1

1

Two things you can do.

  1. If you are getting blob you can directly use it like below- <audio controls src="data:audio/mp3;base64, ...
  2. In audio tag you can directly pass the URL like below-

<audio
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3"
        controls
      />
mohit jain
  • 91
  • 4