MP3 (Audio) files uploaded to S3 are unplayable - how to correctly upload audio to S3?

Question

I have a ReactJS NextJS App that generates an `audioFile`, `blobURL` and also the raw `audioBlob` on the front-end and passes the data via an API Route directly to AWS S3. Unfortunately, the files that are received by S3 are not playable via the console, or after download.

This is the fetch request which is attempting to send `audioFile` onClick:

```
  const submitVoiceMemo = async () => {
    try {
      await fetch('/api/createVoiceMemo', {
        method: 'PUT',
        body: audioFile
      })
    } catch (error) {
      console.error(error)
    }
  }
```

and this is the API route:

```
module.exports = requireAuth(async (req, res) => {
  try {
    AWS.config.update({
      accessKeyId: process.env.AWS_ACCESS_KEY_1,
      secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY_ID,
      region: 'us-east-2',
      signatureVersion: 'v4'
    })

const s3 = new AWS.S3()

const uuid = randomUUID()
    const s3Params = {
      Bucket: 'waveforms',
      Key: `voicememo/${uuid}.mp3`,
      Body: req.body,
      ContentType: 'audio/mpeg',
      ACL: 'public-read'
    }

} catch (e) {
    res.status(500).json({ error: e.message })
  }
})

```

**How can I correctly upload audio MP3s to S3 so they are playable in the console?**

Answer

Hello,

In S3 console/browser, if you try to open a file then .mp3 file is downloaded by default whereas .mp4 is played by most browsers. It is browser dependent.

In this case, I was able to test and upload a local mp3 file using the Boto3 as explained here https://boto3.amazonaws.com/v1/documentation/api/latest/guide/s3-uploading-files.html

The above method worked as expected. To understand the cause of the issue, Please save the mp3 to a local disk and confirm it is playable and then upload it to S3 using SDK and CLI.

This will confirm if the issue is with the way it is uploaded or if it is with the source mp3 file itself.

Here is a third party link that can help you.  Please note that AWS does not own these codes as they are developed by someone else and they own all the rights associated with these codes. I have shared the links discussed above on a best-effort basis in order to assist you.

https://www.youtube.com/watch?v=p2NPGfkhRrQ
https://github.com/bjrshussain/audio_to_AWS-S3

I hope the above information is helpful.

MP3 (Audio) files uploaded to S3 are unplayable - how to correctly upload audio to S3?

Relevant content