HTML5 <audio>背景音频在Safari浏览器无法播放的解决方法

问题根源 #

iOS全版本Safari（含iOS端所有第三方浏览器，均使用Safari内核）存在强制媒体播放限制，原生autoplay属性会被直接拦截，核心限制规则如下：

• 无用户主动交互（点击、触摸、按键等）触发的音频自动播放请求，会被系统直接拒绝
• 设置display: none的音频元素会被移出渲染树，部分Safari版本会直接停止该类元素的资源加载与播放逻辑
• 缺少行内播放属性的音频元素，会被判定为需要全屏/手动触发的媒体资源，无法后台循环播放

可直接复用的实现代码 #

1. 音频标签修改 #

删除原有autoplay、display:none配置，补充Safari需要的行内播放属性：

<audio 
  id="bgMusic"
  src="wp-content/uploads/foldername/filename.mp3"
  loop
  preload="auto"
  playsinline
  webkit-playsinline
></audio>

2. 隐藏元素样式 #

不要使用display: none，采用视觉隐藏方案，既保证用户看不到控件，也不会被Safari判定为无效元素：

#bgMusic {
  position: fixed;
  left: -1px;
  top: -1px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

3. 交互触发播放逻辑 #

iOS系统限制无法绕过，必须通过用户首次交互触发音频启动，触发后即可实现无控件无限循环后台播放，同时兼容页面切后台后被系统暂停的场景：

const bgMusic = document.getElementById('bgMusic');
let audioStarted = false;

const startAudio = () => {
  if (audioStarted) return;
  const playRes = bgMusic.play();
  if (playRes !== undefined) {
    playRes.then(() => {
      audioStarted = true;
      // 播放成功后移除监听，减少不必要的性能消耗
      document.removeEventListener('click', startAudio);
      document.removeEventListener('touchstart', startAudio);
      document.removeEventListener('keydown', startAudio);
    }).catch(() => {});
  }
};

// 绑定用户首次进入页面后的所有常见交互行为
document.addEventListener('click', startAudio, false);
document.addEventListener('touchstart', startAudio, false);
document.addEventListener('keydown', startAudio, false);

// 兼容页面从后台切回时，音频被系统自动暂停的问题
document.addEventListener('visibilitychange', () => {
  if (!document.hidden && audioStarted) bgMusic.play();
});

注意事项 #

• 所有声称可完全绕过用户交互实现iOS自动播放的方案均会在新版本系统失效，苹果会持续封堵相关漏洞，不建议使用
• 上述实现不会展示任何播放、暂停、音量调节控件，完全符合无控件后台循环播放的需求
• 建议将音频文件压缩至1-2M以内，避免首次触发播放时出现加载延迟
• 该方案兼容所有主流PC、移动端浏览器，包括Windows Chrome、安卓Chrome、全版本Safari

内容的提问来源于stack exchange，提问作者Darko Milošević