Chrome录制并通过预签名URL上传至S3的音频无法在Safari播放

核心问题根源 #

Chrome的MediaRecorder API默认录制的音频格式是WebM（Opus编码），即便你在预签名POST和上传流程中指定了audio/mpeg的Content-Type，实际上传到S3的文件本质仍是WebM格式。而Safari对WebM音频的兼容性极差（旧版本完全不支持，新版本仅有限支持），再加上S3文件的Content-Type与实际格式不匹配，直接导致Safari无法正常解析播放。

解决方案 #

1. 前端录制时生成Safari兼容格式

修改MediaRecorder配置，强制使用Safari原生支持的AAC编码MP4格式：

// 优先选择兼容格式，降级到WebM作为备选
const targetMimeType = MediaRecorder.isTypeSupported('audio/mp4; codecs="aac"') 
  ? 'audio/mp4; codecs="aac"' 
  : 'audio/webm';

// 初始化MediaRecorder时指定目标格式
const mediaRecorder = new MediaRecorder(stream, { mimeType: targetMimeType });

2. 同步更新后端与前端的Content-Type配置

• 后端预签名POST代码，将Content-Type改为audio/mp4：

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

• 前端上传时，确保FormData中的文件指定正确的MIME类型：

// 第三个参数指定type，与后端预签名配置保持一致
formData.append('file', audioBlob, { type: 'audio/mp4' });

3. 验证S3文件元数据

上传完成后，前往S3控制台检查目标文件的Content-Type元数据，确认其值为audio/mp4，避免因配置遗漏导致格式不匹配。

备选方案（已有大量WebM文件时）

如果已存储大量WebM格式文件，可通过AWS Lambda + MediaConvert实现自动转码：

• 配置S3上传事件触发Lambda函数
• Lambda调用MediaConvert将WebM转码为AAC/MP4格式
• 将转码后的文件存入S3，并更新播放链接为转码后的地址

内容的提问来源于stack exchange，提问作者Samyak Jain