iOS端仅在其他视频播放时才可播放音频问题求助

问题原因 #

iOS上的Safari（包括其他基于WebKit的浏览器）对Web Audio API有严格限制：未被激活的AudioContext会被自动挂起，只有在用户主动触发的交互（比如点击、触摸屏幕）里才能激活它。你提到视频播放后音频就能正常工作，是因为视频播放时会自动激活AudioContext；而平时这个上下文处于挂起状态，直接调用播放方法就没反应。

具体解决方法 #

方法1：手动激活AudioContext（最可靠） #

修改playSong函数，在调用play()前检查AudioContext状态，确保在用户点击的同一交互流程内完成激活与播放：

const ListenStory = ({ soundFile, soundAuthor }: Props) => {
  const [isPlaying, setIsPlaying] = useState(false);
  // 缓存AudioContext实例，避免重复创建
  const audioContextRef = useRef<AudioContext | null>(null);
  const [play, { stop }] = useSound(soundFile, { volume: 0.4 });
  const [isMobile, isPad, cacheBuster] = useIsMobile();

  function playSong() {
    setIsPlaying(true);
    // 初始化AudioContext，兼容旧版webkit环境
    if (!audioContextRef.current) {
      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
    }
    const audioCtx = audioContextRef.current;
    // 若上下文处于挂起状态，先恢复再播放
    if (audioCtx.state === 'suspended') {
      audioCtx.resume().then(() => play());
    } else {
      play();
    }
  }

  function stopSong() {
    setIsPlaying(false);
    stop();
  }

  // 组件卸载时关闭上下文，避免内存泄漏
  useEffect(() => {
    return () => audioContextRef.current?.close();
  }, []);

  // ... 其余渲染代码保持不变
};

方法2：尝试use-sound内置配置 #

部分版本的use-sound支持通过配置项处理激活问题，初始化时关闭音频开关，点击播放时再开启：

const [play, { stop }] = useSound(soundFile, { 
  volume: 0.4,
  soundEnabled: false
});

function playSong() {
  setIsPlaying(true);
  // 启用音频并触发播放
  play({ soundEnabled: true });
}

方法3：用静音音频触发激活 #

提前创建一个静音音频元素，在用户首次点击时先播放它，间接激活AudioContext后再播放目标音频：

const ListenStory = ({ soundFile, soundAuthor }: Props) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [play, { stop }] = useSound(soundFile, { volume: 0.4 });
  const [isMobile, isPad, cacheBuster] = useIsMobile();
  const silentAudioRef = useRef<HTMLAudioElement | null>(null);

  useEffect(() => {
    // 创建静音音频元素，使用base64格式无需额外请求
    silentAudioRef.current = new Audio();
    silentAudioRef.current.src = 'data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT';
    silentAudioRef.current.volume = 0;
  }, []);

  function playSong() {
    setIsPlaying(true);
    // 先播放静音音频激活上下文，再播放目标音频
    silentAudioRef.current?.play().then(() => play()).catch(() => {
      // 兼容异常情况，直接尝试播放目标音频
      play();
    });
  }

  function stopSong() {
    setIsPlaying(false);
    stop();
  }

  // ... 其余渲染代码保持不变
};

注意事项 #

• 所有激活AudioContext和播放音频的操作，必须在用户主动点击、触摸这类交互事件中执行，不能在useEffect、异步回调等非用户触发的逻辑中操作，否则会被iOS安全策略拦截。
• 不要尝试页面加载完成后自动播放音频，iOS的安全机制不允许这类无交互触发的音频播放。

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