Safari中Firebase Storage下载URL作audio源报NotSupportedError

Safari对可播放媒体资源的校验规则比Chrome严格，Firebase Storage默认返回的下载链接存在三个不兼容点，直接触发NotSupportedError：

• 上传MP3时未显式指定元数据的情况下，Firebase Storage默认返回Content-Type: application/octet-stream响应头，Chrome会自动嗅探文件内容识别为音频，Safari严格按响应头判断资源类型，直接拒绝将二进制流作为音频源加载。
• 部分存量文件的响应头会携带Content-Disposition: attachment标记，Safari判定该资源为下载附件而非可在线播放的流媒体资源，拦截播放请求。
• 默认下载链接未正确配置CORS规则时，Safari发起的音频分段Range请求无法拿到合法的206响应，导致资源加载失败。

按以下优先级依次配置，即可覆盖所有Safari版本的兼容问题：

1. 修正所有音频文件的存储元数据 #

上传MP3到Firebase Storage时必须显式指定正确的内容类型，禁止使用默认值，上传代码参考：

import { ref, uploadBytes } from "firebase/storage";
const songStorageRef = ref(storage, `songFiles/${yourFileName}`);
// 核心配置：显式标记文件为MP3音频类型
const fileMetadata = {
  contentType: 'audio/mpeg',
};
await uploadBytes(songStorageRef, songFileBlob, fileMetadata);

已经上传的存量文件无需重新上传，直接调用更新元数据的接口批量修正contentType字段即可。

2. 配置存储实例CORS规则 #

给Firebase Storage添加GET请求的跨域规则，允许音频分段加载请求正常通过，规则示例：

[
  {
    "origin": ["你的线上业务域名", "本地调试用的localhost地址加端口"],
    "method": ["GET"],
    "responseHeader": ["Content-Type", "Range", "Accept-Ranges"],
    "maxAgeSeconds": 3600
  }
]

配置完成后等待5-10分钟生效，此时资源响应头会携带Accept-Ranges: bytes标记，Safari的分段加载逻辑可正常执行。

3. 调整前端播放兼容逻辑 #

不要直接给audio元素赋值src后立刻调用play，做两处适配：

• 给audio标签添加crossorigin="anonymous"属性，解决跨域资源加载的凭证问题
• 等待音频元数据加载完成后再触发播放，同时捕获播放Promise的异常，避免未处理报错
  Vue侧实现代码参考：

<template>
  <audio ref="playerRef" crossorigin="anonymous" preload="metadata"></audio>
</template>

<script setup>
import { ref } from 'vue'
const playerRef = ref(null)

const handlePlaySong = async (song) => {
  const player = playerRef.value
  // 重置之前的播放状态
  player.pause()
  player.removeAttribute('src')
  player.load()
  // 赋值新的音频地址
  player.src = song.songFileUrl
  try {
    // 等待元数据加载完成再触发播放，适配Safari的资源校验逻辑
    await new Promise((resolve, reject) => {
      player.onloadedmetadata = resolve
      player.onerror = reject
    })
    await player.play()
  } catch (err) {
    console.error('音频播放异常:', err)
  }
}
</script>

兜底兼容方案 #

如果完成以上配置后仍有极少数Safari版本存在兼容问题，可以将Firebase Storage的音频链接通过自身静态服务做一层转发，把带参数的长链接转换成末尾带.mp3后缀的静态资源路径，和测试可正常播放的公开直链格式保持一致，即可绕过Safari对URL格式的校验。

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