Vue3扫码触发音频在iOS浏览器失效，按钮触发正常求排查

基于Vue3开发的应用中，扫描二维码触发音频播放功能在Android设备及网页端正常，但iOS浏览器中无法生效；通过按钮点击触发同一函数则音频可正常播放。

相关代码如下：

二维码扫描组件

<qrcode-stream
  :camera="camera"
  @decode="onDecode"
  :torch="torch"
  :track="drawoutline"
>
</qrcode-stream>

触发函数

async function onDecode(data) {
  new Audio(require("../assets/audio.mp3")).play();
}

按钮触发代码

<q-btn
  label="play sound"
  @click="onDecode('Audio')"
></q-btn>

核心原因：iOS WebKit的媒体播放限制 #

iOS端所有基于WebKit内核的浏览器（包括Safari、微信浏览器等）有严格的自动播放策略：仅允许在用户主动交互（点击、触摸等）触发的回调中播放媒体内容。

• 按钮点击属于用户主动触发的交互事件，完全符合iOS的播放权限要求，因此能正常播放音频。
• 二维码扫描的@decode事件是组件扫描到内容后异步触发的事件，并非用户直接的触摸/点击操作触发，iOS会判定这属于非用户主动交互行为，直接拦截音频播放请求。

解决方案 #

1. 提前获取用户交互权限
   在应用加载完成后，通过用户的首次主动操作（比如页面任意位置点击、专门的"授权播放"按钮）预加载音频并触发一次静音播放，提前获取iOS的媒体播放权限：

// 全局保存预加载的音频实例
let audioInstance = null;

function initAudioPermission() {
  audioInstance = new Audio(require("../assets/audio.mp3"));
  audioInstance.muted = true;
  // 触发静音播放获取权限，失败也不影响后续逻辑
  audioInstance.play().catch(err => console.log("预加载权限获取失败:", err));
}

// 绑定到页面首次点击事件，仅执行一次
document.body.addEventListener('click', initAudioPermission, { once: true });

2. 复用预加载的音频实例
   后续扫码触发时，直接使用预加载好的音频实例播放，避免每次创建新实例：

async function onDecode(data) {
  if (audioInstance) {
    // 重置音频到起始位置，避免上次播放未结束的问题
    audioInstance.currentTime = 0;
    audioInstance.play().catch(err => console.log("音频播放失败:", err));
  }
}

3. 额外注意事项

• 确保音频文件格式兼容iOS，优先使用MP3格式。
• 不要在@decode事件中添加过多异步逻辑，尽量直接触发播放，降低iOS判定为非用户交互的概率。

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