You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Expo-AV:避免静音背景视频暂停用户后台音乐的方案

解决方案

核心问题

expo-av 默认的音频会话配置会抢占系统音频焦点,即便视频已静音,仍会暂停后台音乐。我们需要针对背景视频和用户主动触发的音频分别配置不同的音频会话策略。


步骤1:配置背景视频的音频会话

在渲染背景视频的组件中,设置音频会话为「不抢占后台音频」模式,让背景视频完全不干扰后台音乐播放:

import { useEffect } from 'react';
import { Audio, Video } from 'expo-av';
import tailwind from 'tailwind-rn';

export default function BackgroundVideoScreen({ intro }) {
  useEffect(() => {
    const setupBackgroundAudioMode = async () => {
      await Audio.setAudioModeAsync({
        // iOS:允许与后台音频混合播放,不暂停其他应用
        interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
        // Android:让后台音频降低音量(而非暂停)
        interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
        shouldDuckAndroid: true,
        // 允许静音模式下播放视频
        playsInSilentModeIOS: true,
        // 禁止录音(避免不必要的权限请求)
        allowsRecordingIOS: false,
        // 应用退到后台时不保持音频会话活跃
        staysActiveInBackground: false,
      });
    };

    setupBackgroundAudioMode();

    // 组件卸载时恢复默认音频模式
    return async () => {
      await Audio.setAudioModeAsync(Audio.DEFAULT_AUDIO_MODE);
    };
  }, []);

  return (
    <Video
      style={tailwind.style('w-full h-full absolute z-10')}
      source={intro}
      resizeMode="cover"
      isLooping={true}
      isMuted={true}
      shouldPlay={true}
    />
  );
}

步骤2:配置用户主动触发的音频

对于用户主动操作触发的音频,设置音频会话为「抢占后台音频」模式,符合用户预期的交互逻辑:

import { Audio } from 'expo-av';

export async function playUserInitiatedAudio(audioSource) {
  // 切换到抢占音频焦点的模式
  await Audio.setAudioModeAsync({
    // iOS:暂停其他应用的音频
    interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_PAUSE_OTHERS,
    // Android:暂停其他应用的音频
    interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_PAUSE_OTHERS,
    playsInSilentModeIOS: true,
  });

  // 创建并播放音频
  const { sound } = await Audio.Sound.createAsync(audioSource);
  await sound.playAsync();

  // 音频播放结束后,恢复背景视频的音频模式(可选,根据需求调整)
  sound.setOnPlaybackStatusUpdate(async (status) => {
    if (status.didJustFinish) {
      await Audio.setAudioModeAsync({
        interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
        interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
        shouldDuckAndroid: true,
        playsInSilentModeIOS: true,
        allowsRecordingIOS: false,
        staysActiveInBackground: false,
      });
      await sound.unloadAsync();
    }
  });
}

额外优化:确保视频无音轨

如果视频本身仍包含静音音轨(只是音量为0),可能仍会触发音频会话冲突。可以用FFmpeg移除视频音轨,生成纯视频文件:

ffmpeg -i original.mp4 -an -c:v copy silent-background.mp4

解释:-an 参数表示移除所有音频流,-c:v copy 表示原样复制视频流,不重新编码,保证效率。


内容的提问来源于stack exchange,提问作者owenmelbz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.30 09:25:10