Chrome自动播放政策变更：恢复AudioContext上下文无法取消音频静音

兄弟，我之前开发PWA音乐应用时也碰到过一模一样的Android端失效问题，这完全是Chrome的媒体自动播放政策更新搞的鬼——现在所有涉及音频播放的操作（包括创建并激活AudioContext）都必须由用户主动交互触发（比如点击、触摸），不能在页面加载完成后自动执行，之前页面加载时直接初始化AudioContext的方式自然就被浏览器拦截了。

下面是具体的解决步骤，亲测有效：

1. 延迟AudioContext初始化，等待用户第一次交互 #

别再页面加载时就创建AudioContext了，把初始化逻辑绑定到用户的第一次交互事件上，比如播放按钮的点击：

// 先声明全局AudioContext变量，初始为null
let audioContext = null;

// 监听播放按钮的点击事件
document.getElementById('play-btn').addEventListener('click', async () => {
  // 如果还没创建AudioContext，就初始化它
  if (!audioContext) {
    // 兼容不同浏览器的前缀
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    // 部分浏览器初始化后AudioContext会处于暂停状态，需要手动唤醒
    await audioContext.resume();
  }

  // 在这里执行你的音频播放逻辑，比如加载音频、连接节点等
  startPlayingMusic();
});

2. 适配预加载的音频资源 #

如果你之前提前预加载了音频文件，要确保这些资源的播放操作也在用户交互之后执行：

// 预加载音频文件，但不自动播放
let audioBuffer;
async function preloadAudio() {
  const response = await fetch('your-music-file.mp3');
  const arrayBuffer = await response.arrayBuffer();
  audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
}

// 播放逻辑放在用户交互触发的函数里
function startPlayingMusic() {
  const sourceNode = audioContext.createBufferSource();
  sourceNode.buffer = audioBuffer;
  sourceNode.connect(audioContext.destination);
  sourceNode.start();
}

3. 优化用户体验，避免困惑 #

页面加载完成后，可以显示一个“点击播放开始音乐”的提示，直到用户第一次交互后再隐藏，避免用户不知道为什么音乐没响：

#play-tip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 8px;
  text-align: center;
}

const playTip = document.getElementById('play-tip');

document.getElementById('play-btn').addEventListener('click', () => {
  playTip.style.display = 'none';
  // 执行初始化和播放逻辑
});

4. 额外注意事项 #

• 所有和音频相关的操作（包括创建节点、调用start()、调整音量等）都要确保是在用户交互回调内或者之后执行，不能提前触发。
• 如果有多个播放入口，可以监听整个document的第一次点击/触摸事件，初始化AudioContext后就移除这个监听，避免重复初始化。
• 真机测试很重要！Chrome开发者工具的模拟可能和实际真机的政策执行有差异，一定要在Android设备上验证效果。

内容的提问来源于stack exchange，提问作者товіаѕ