Audio Recorded on Chrome and Uploaded to S3 Using Presigned URL Plays in All Browsers Except Safari

Question

I'm developing a web application that allows users to record audio and upload it to AWS S3 using presigned POST URLs. The recorded audio is played back using an element with the S3 link as the source.

I've encountered an issue where audio recorded in Chrome plays correctly in all browsers except Safari. The audio mimetype is set to (audio/mp3).

I am getting presigned url using the following code:

presigned_post = s3_client.generate_presigned_post(
    Bucket=BUCKET_NAME,
    Key=filename,
    Fields={"acl": "public-read", "Content-Type": "audio/mpeg"},
    Conditions=[
        {"acl": "public-read"},
        {"Content-Type": "audio/mpeg"},
        ["content-length-range", 0, 10485760],
    ],
    ExpiresIn=3000,
)

And then calling this presigned url on frontend and uploading on S3 using the following code:

const presignedData = await this.getPresignedUrl(this.ysId, poseId);
const formData = new FormData();
Object.keys(presignedData.fields).forEach(key => formData.append(key, presignedData.fields[key]));
formData.append('file', audioBlob);

const response = await fetch(presignedData.url, {
    method: 'POST',
    body: formData
});

My bucket CORS policy is as:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag",
            "Content-Type",
            "Accept-Ranges",
            "Content-Range",
            "Content-Length"
        ],
        "MaxAgeSeconds": 3000
    }
]

What I Tried:

• Recording Audio: I implemented audio recording functionality using the MediaRecorder API in Chrome, where the audio is captured and stored in a Blob.
• Uploading to S3: I generated presigned POST URLs for uploading the recorded audio files to AWS S3, ensuring the content type is set to audio/mpeg.
• Playback: I used the S3 URL as the source for an element to play back the recorded audio.

What I Expected:

I expected the audio recorded in Chrome to play correctly in all browsers, including Safari. However, while the audio plays fine in Chrome, Firefox, and other browsers, it does not play in Safari. I was hoping to understand the underlying issue causing this discrepancy and find a solution for compatibility.