iOS17 Safari中AudioContext（Web Audio API）无法正常工作问题求助

核心原因 #

iOS17的Safari进一步收紧了Web Audio API的权限，AudioContext必须在用户主动交互（如点击、触摸）的回调中初始化或恢复（resume），否则会保持挂起状态，即便音频资源加载完成也无法触发播放。

修复方案 #

将AudioContext的创建/恢复逻辑绑定到用户的播放触发事件中（比如点击播放按钮的回调），示例代码如下：

// 全局声明AudioContext实例，避免重复创建
let audioCtx;
const audio = document.getElementById('your-audio-element');
const playBtn = document.getElementById('play-btn');

playBtn.addEventListener('click', async () => {
  // 初始化或恢复AudioContext
  if (!audioCtx) {
    audioCtx = new AudioContext();
  } else if (audioCtx.state === 'suspended') {
    await audioCtx.resume();
  }

  // 创建节点并连接链路
  const gainNode = audioCtx.createGain();
  gainNode.gain.value = 2;
  const sourceNode = audioCtx.createMediaElementSource(audio);
  sourceNode.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  // 触发音频播放
  await audio.play();
});

额外注意事项 #

• 所有与AudioContext相关的操作必须在用户交互回调内执行，不能在页面加载完成后自动触发。
• 尽量复用同一个AudioContext实例，避免重复创建。
• 可以通过audioCtx.state检查上下文状态，确保处于running状态后再执行音频操作。

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