iOS Safari中偶现GET <audio> error错误的原因探究

你创建的持久化Audio对象代码如下：

const audio = new Audio()
audio.src = "xxx.mp3"
document.body.appendChild(audio)

多次调用audio.play()时在iOS Safari偶尔出现GET <audio> error，主要有以下几个常见原因：

• 用户交互上下文过期：iOS Safari强制要求媒体播放必须由用户主动交互（点击、触摸等）触发。即便之前有过合法的用户交互，若间隔时间过长，或者页面状态切换（比如切后台再切回），系统会判定交互上下文失效，此时调用audio.play()会触发资源请求失败的错误。
• 资源缓存与加载异常：持久化Audio对象的资源会依赖Safari的缓存机制，当iOS系统内存紧张时，可能会主动清理音频缓存；如果音频URL的缓存策略设置不合理（比如无缓存、缓存过期），或者资源服务器临时不可用，再次播放时重新请求资源就会失败，抛出GET错误。
• 系统资源管控限制：iOS对后台非活跃页面的媒体资源管控严格，若页面长时间处于后台，系统会释放Audio对象占用的媒体资源，再次回到前台调用audio.play()时，需要重新加载资源，一旦加载失败就会出现该错误。
• Audio对象状态未正确维护：多次调用audio.play()时，如果前一次播放未完成、处于错误状态，或者没有等待canplay/loadeddata事件就触发播放，可能导致对象内部状态异常，进而引发资源请求错误。

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