iOS 17 Safari滑动手势触发音频播放的解决方案咨询

方案1：先通过点击完成音频上下文解锁，后续滑动直接控制播放 #

iOS 17 Safari的音频解锁限制仅针对首次激活音频上下文，只要用户通过合法交互（比如点击）完成解锁，后续任何手势都可以直接操作已激活的音频上下文播放缓冲区。

实现步骤：

• 初始化AudioContext实例，默认处于挂起状态
• 添加一个初始化按钮，在其click事件中调用audioContext.resume()完成解锁
• 解锁完成后，滑动手势的事件回调中直接调用音频缓冲区的播放方法

示例代码：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let buffer; // 假设已加载好音频缓冲区

// 初始化解锁按钮
document.getElementById('initBtn').addEventListener('click', async () => {
  if (audioContext.state === 'suspended') {
    await audioContext.resume();
    console.log('音频上下文已解锁');
  }
});

// 滑动手势控制播放
document.addEventListener('touchmove', () => {
  if (audioContext.state === 'running') {
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start();
  }
});

方案2：利用touchstart事件提前解锁，配合滑动手势播放 #

如果不想额外加初始化按钮，可以在用户触发滑动的touchstart阶段尝试解锁音频上下文——只要touchstart是用户主动触发且无前置脚本干预，iOS 17 Safari会认可这个交互作为解锁条件。

实现要点：

• 在touchstart事件中检查音频上下文状态，若处于挂起则调用resume()
• 在后续的touchmove事件中直接播放缓冲区（此时上下文已解锁）

示例代码：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let buffer;
let isUnlocked = false;

document.addEventListener('touchstart', async (e) => {
  e.preventDefault(); // 可选，根据页面需求调整
  if (!isUnlocked && audioContext.state === 'suspended') {
    await audioContext.resume();
    isUnlocked = true;
  }
});

document.addEventListener('touchmove', () => {
  if (isUnlocked) {
    const source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start();
  }
});

注意事项 #

• 必须确保解锁操作由用户主动交互触发，脚本自动触发的resume()会被iOS Safari拦截
• 音频上下文解锁后会保持激活状态，直到页面刷新或被系统回收，无需重复解锁
• 若滑动手势需要页面滚动，需注意preventDefault()的使用，避免影响页面正常滚动行为

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