

Īssuming that the file you had uploaded to S3 is valid here are two approaches: I have a few approaches, assuming you're trying to load this into an audio tag in the UI. Do you load this into the blob into the HTML5 Audio player. I'm not super clear about the client-side approach. Your server side code seems alright to me. If using the Fetch API then it could be as simple as: const blob = await fetch().then(x => x.blob()) With: res.set('Content-Type', 'audio/mp3') Īnd on the client side (likely in the loadAudio method) processing the response as a blob instead of JSON. Instead, you can send the Buffer across directly, which would involve, on the server side, replacing: res.send(data) Having said all that, the underlying issue is that the NodeJS server is sending the content over as a JSON encoded serialisation of the response from S3, which is likely overkill for what you are doing. Router.post("/",, async (req, res) => ) In my Express/Node server, I receive the uploaded mp3 file and save to the S3 bucket: //SAVE THE COMPLETED AUDIO TO S3 Here's the journey the recorded mp3 file goes on: Saving the file works just fine, but when I try to retrieve the file with getObject() and try to create an mp3 blob on the client-side, I get a small, unusable blob: These mp3 files are saved in an AWS S3 bucket and can be retrieved and loaded back into the react app during the user's next session. I have a react web app that allows users to record mp3 files in the browser.
