iOS 15/16 Safari中WebAudio失效问题及解决方案咨询

问题描述 #

iOS移动端Safari存在WebAudio功能异常：未连接蓝牙音频时，WebAudio示例可正常播放；但一旦使用过蓝牙音频，关闭蓝牙后再播放音频无声音输出（无报错），必须重启Safari才能恢复功能。相同代码在桌面版Safari及其他浏览器可正常运行。

修复方案 #

针对iOS Safari的这个特定bug，可通过以下方式解决：

• 监听音频设备变化，重建AudioContext
  Safari在蓝牙设备断开后，AudioContext的输出目标可能仍绑定到已断开的蓝牙设备，此时需要监听设备变化事件，销毁旧的AudioContext并重新创建：

  let audioContext = null;
  
  // 初始化AudioContext（需用户交互触发，iOS要求）
  function initAudioContext() {
    if (!audioContext || audioContext.state === 'closed') {
      audioContext = new (window.AudioContext || window.webkitAudioContext)();
    }
    return audioContext;
  }
  
  // 监听音频设备变化
  navigator.mediaDevices.addEventListener('devicechange', () => {
    if (audioContext) {
      // 关闭旧的上下文，下次播放时重新初始化
      audioContext.close().then(() => {
        audioContext = null;
      });
    }
  });
  
  // 播放音频的方法（需绑定到用户交互事件）
  function playTone() {
    const ctx = initAudioContext();
    ctx.resume(); // 确保上下文处于运行状态
  
    const oscillator = ctx.createOscillator();
    oscillator.frequency.value = 440;
    const gain = ctx.createGain();
    gain.gain.value = 0.04;
    oscillator.connect(gain);
    gain.connect(ctx.destination);
    oscillator.start();
    oscillator.stop(ctx.currentTime + 10);
  }
  

• 强制绑定输出到内置扬声器（可选）
  若无需切换音频设备，可通过MediaDevices.selectAudioOutput()强制指定输出设备为内置扬声器（需用户授权，仅支持较新版本iOS）：

  async function setBuiltInSpeaker() {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const builtInSpeaker = devices.find(device => 
      device.kind === 'audiooutput' && device.label.includes('扬声器')
    );
    if (builtInSpeaker && audioContext) {
      await audioContext.setSinkId(builtInSpeaker.deviceId);
    }
  }
  

注意：iOS要求所有音频操作必须由用户手势（点击、触摸等）触发，因此初始化AudioContext和播放音频的方法必须绑定到用户交互事件，不能自动执行。

Chromium打包WebApp能否解决？ #

可以解决。Chromium内核的WebView（比如使用Capacitor、Electron或Cordova打包的WebApp）采用独立的音频栈，不存在Safari这个特定的蓝牙设备切换后WebAudio失效的bug，打包后可正常在iOS上运行。

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