React中HTML Audio控件在Safari下不显示下载选项如何解决

问题对应代码 #

<audio controls>
  <source src={url} />
</audio>

上述代码在Chrome、Firefox等浏览器可正常显示全量控件（含下载选项），仅Safari下控件只展示播放速率调整项，缺失下载入口。

核心原因 #

Safari对原生audio控件的下载按钮显示有严格的校验规则，缺失以下任意一项配置都会导致下载选项被隐藏，其中漏写<source>的type属性是最高发的诱因：

• 未给<source>标签显式声明匹配资源格式的type属性，Safari无法提前识别资源为可播放音频
• 跨域音频资源未配置CORS响应头，且audio标签未加crossorigin声明，Safari判定资源不可安全下载
• 音频资源的响应头Content-Type和实际格式不匹配，或设置了拦截跨域读取的安全配置
• 低版本Safari（macOS 12及更早版本、全版本iOS Safari）原生控件本身就没有内置下载按钮，属于浏览器本身的功能限制，和代码配置无关

修复方案 #

1. 补全原生标签配置（适配macOS 13+ 高版本Safari） #

补全preload、type、crossorigin属性，修复后代码如下：

<audio 
  controls 
  preload="metadata"
  {/* 跨域CDN/OSS资源需要加下面这行，同源资源可删除 */}
  crossorigin="anonymous"
>
  {/* 必须显式写type属性，值和音频实际格式匹配：mp3对应audio/mpeg，m4a对应audio/mp4 */}
  <source src={url} type="audio/mpeg" />
</audio>

同时需要给存储音频的服务端/CDN配置对应规则：

• 正确设置音频资源的Content-Type响应头，和资源实际格式一致
• 跨域场景下配置Access-Control-Allow-Origin响应头，匹配当前业务域名，允许GET请求访问资源

2. 兼容低版本Safari/全版本iOS Safari #

上述版本的Safari原生控件无内置下载入口，必须叠加自定义下载按钮实现功能，参考实现：

const AudioPlayer = ({ url, fileName = '音频.mp3' }) => {
  const handleDownload = async () => {
    // 跨域资源场景下打开下面注释的代码，先转blob再下载
    // const res = await fetch(url)
    // const blob = await res.blob()
    // const downloadUrl = URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url // 跨域场景替换为上面生成的downloadUrl
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    // 跨域场景下打开下面注释，释放blob内存
    // URL.revokeObjectURL(downloadUrl)
  }

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <audio 
        controls 
        preload="metadata"
        crossorigin="anonymous"
      >
        <source src={url} type="audio/mpeg" />
      </audio>
      <button onClick={handleDownload}>下载音频</button>
    </div>
  )
}

注意：如果音频资源存储在第三方跨域域名下，必须先将资源转为blob地址再触发下载，否则浏览器会直接跳转打开音频播放页，不会触发下载行为。
自定义下载按钮是兼容性最好的方案，不会受不同浏览器原生控件规则差异的影响，推荐优先使用

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