从Google Cloud Storage下载的MP3音频无法播放，求解决方案

问题背景 #

• 音频、图片、视频已上传至Google Cloud Storage（GCS），图片和视频下载后可正常查看，但MP3格式音频下载后无法播放。
• 将音频扩展名改为webm可临时绕过问题，但每次重播需打开浏览器，用户体验不佳。
• 最初下载音频会自动保存为xml文件，修改代码为文件名添加.mp3后缀后，虽能下载MP3文件，但仍无法播放。

现有代码 #

初始下载代码 #

const storage = getStorage();
let file = post.fileUrl;
getDownloadURL(ref(storage, file))
    .then((url) => {
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = (event) => {
            const blob = xhr.response;
            // 创建文件对象
            var file = new File(
                [blob],
                'file'
                ,
                {
                    type: blob.type,
                },
            );
            // 创建下载链接
            var link = document.createElement('a');
            link.download = file.name;
            link.href = URL.createObjectURL(file);
            link.click();
        };

        xhr.open('GET', url);
        xhr.send();
    })
    .catch((err) => {
        console.log(err);
    })

修改文件名后的代码片段 #

var file = new File(
    [blob],
    `${dataHandle}_GoodbyeApp
    ${
        post.fileType === 'audio'
            ? '.mp3'
            : ''
    }`,
    {
        type: blob.type,
    },
);

解决步骤 #

1. 检查GCS文件的Content-Type #

GCS默认的MIME类型识别可能出错，导致MP3文件的Content-Type不是audio/mpeg：

• 登录GCS控制台，找到目标MP3文件，进入「元数据」页面。
• 确认Content-Type字段值为audio/mpeg，若不是则手动修改。
• 后续上传MP3时，建议明确指定Content-Type: audio/mpeg，避免自动识别错误。

2. 强制指定File对象的MIME类型 #

当前代码使用blob.type作为File的类型，如果GCS返回的Blob类型错误，会导致下载的MP3文件类型不被播放器识别，可强制指定：

var file = new File(
    [blob],
    `${dataHandle}_GoodbyeApp${post.fileType === 'audio' ? '.mp3' : ''}`,
    {
        type: post.fileType === 'audio' ? 'audio/mpeg' : blob.type,
    },
);

3. 验证GCS源文件完整性 #

直接从GCS控制台下载MP3文件，尝试本地播放：

• 如果控制台下载的文件也无法播放，说明上传时文件已损坏，需重新上传正确的MP3文件。
• 如果控制台下载的文件正常，说明问题出在前端下载流程。

4. 简化下载流程（可选） #

跳过XHR转Blob的步骤，直接使用GCS下载链接触发下载，减少中间环节可能的错误：

const storage = getStorage();
let file = post.fileUrl;
getDownloadURL(ref(storage, file))
    .then((url) => {
        const link = document.createElement('a');
        // 明确设置下载文件名
        link.download = post.fileType === 'audio' 
            ? `${dataHandle}_GoodbyeApp.mp3` 
            : 'downloaded-file';
        link.href = url;
        link.click();
    })
    .catch((err) => {
        console.log(err);
    })

注：若浏览器直接打开文件而非下载，需在GCS文件元数据中设置Content-Disposition: attachment; filename="your-file-name.mp3"，强制触发下载行为。

内容的提问来源于stack exchange，提问作者Calvin James Heath