Safari通过HTML audio标签播放大型长音频文件失败的问题咨询

问题前提说明 #

你使用的audio标签代码如下（存在属性拼写笔误，contros应为controls，该笔误仅会导致控制条不显示，不是大音频无法播放的核心诱因）：

<audio src="test.mp3" contros></audio>

问题对应的Safari报错截图如下：

核心限制原因 #

Safari确实存在针对大体积音视频的专属播放限制，Chrome没有同类强制要求所以可以正常播放，具体限制规则如下：

• 强制要求资源服务器支持范围请求（Range Request）：Safari不会一次性加载完整的大体积音视频，会默认分段请求资源，需要服务器返回206 Partial Content状态码，如果服务器不支持该特性、直接返回200全量资源，Safari会直接中断加载，超过10MB的音频几乎100%会触发该限制。
• 元数据解析要求严格：对于MP3格式文件，如果文件的moov元数据块位于文件尾部，Safari需要加载完整个文件才能解析到播放必要的元数据，大文件下极易触发加载超时，导致播放失败。

对应解决方法 #

• 配置服务器支持范围请求
  • Nginx、Apache等主流Web服务器默认开启范围请求支持，确认没有手动关闭该功能即可；
  • 若使用对象存储服务存储音频，需要在跨域CORS配置中暴露Accept-Ranges、Content-Range响应头，允许前端发送Range请求头。
• 优化MP3文件结构
  使用ffmpeg工具将moov元数据块移动到文件头部，无需重新编码音频，执行命令：

  ffmpeg -i 原音频文件.mp3 -c:a copy -movflags +faststart 优化后输出文件.mp3
  

• 超大体积音频适配
  如果音频文件大小超过1GB，可使用MediaSource Extensions（MSE）接口实现分片加载播放，完全规避单文件加载的大小限制，Safari 13.1及以上版本原生支持MP3格式的MSE调用。

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