使用AudioContext时移动端HTML5音频切后台停止播放如何解决

安全阿岳

2026-10-1

问题原因

移动端浏览器对Web Audio API和原生HTML5 Audio的后台播放策略完全独立：原生<audio>元素的播放被浏览器归类为媒体播放会话，符合系统后台音频的保活规则；但AudioContext的音频输出默认被归类为网页内交互音效，当页面进入后台、设备锁屏时，浏览器会主动挂起AudioContext实例释放资源，导致音频中断。
你的代码虽然只是把audio元素作为源接入AudioContext，但最终输出链路从原生audio的输出通道转移到了AudioContext的输出通道，自然就触发了AudioContext的后台挂起规则。

解决方案

首先添加适配移动端播放的基础配置
1. 给HTML的<audio>元素添加x-webkit-airplay="allow" playsinline属性，同时在页面头部加上声明：
```
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
```
1. 初始化AudioContext时，安卓Chrome内核浏览器可设置latencyHint为playback，提升后台播放优先级：
```
const context = new AudioContext({ latencyHint: 'playback' })
```

监听页面状态变化，主动阻止AudioContext和音频被挂起：

const audioEl = document.querySelector("audio")
const source = context.createMediaElementSource(audioEl)
source.connect(context.destination)

// 监听页面可见性变化，切后台时主动恢复被挂起的上下文
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    if (context.state === 'suspended') {
      context.resume()
    }
    if (audioEl.paused) {
      audioEl.play()
    }
  }
})

// 适配部分浏览器切后台/锁屏时主动触发audio暂停的逻辑
audioEl.addEventListener('pause', () => {
  if (document.hidden) {
    audioEl.play()
    context.resume()
  }
})