React Native播放视频时暂停背景音乐、暂停后恢复的问题求助

要实现非静音模式下视频播放时完全停止背景音乐、暂停视频时恢复的效果，核心是手动管理背景音乐的播放状态和进度，结合音频会话配置来抢占/释放音频焦点。以下是具体实现方案：

核心思路 #

1. 使用expo-av的Audio模块单独管理背景音乐，便于精准控制暂停、恢复及进度记录。
2. 监听视频的播放/暂停事件，在对应时机切换音频会话模式并处理背景音乐状态。
3. 记录背景音乐暂停时的播放位置，恢复时从该位置继续播放，避免从头开始。

步骤实现 #

1. 依赖安装 #

首先安装expo-av（无论你用react-native-video还是expo-av的Video组件，都需要它来控制音频）：

npm install expo-av
# 或
yarn add expo-av

2. 背景音乐管理逻辑 #

import { useEffect } from 'react';
import { Audio } from 'expo-av';

// 全局变量存储背景音乐实例和暂停位置
let backgroundSound = null;
let pausedSoundPosition = 0;

// 初始化并播放背景音乐
const initBackgroundMusic = async () => {
  try {
    backgroundSound = new Audio.Sound();
    // 替换为你的背景音乐文件路径（本地或远程）
    await backgroundSound.loadAsync(require('./assets/background.mp3'));
    await backgroundSound.setIsLoopingAsync(true); // 开启循环播放
    await backgroundSound.playAsync();
  } catch (err) {
    console.error('背景音乐加载失败:', err);
  }
};

// 组件挂载时初始化，卸载时清理资源
useEffect(() => {
  initBackgroundMusic();
  return () => {
    if (backgroundSound) {
      backgroundSound.unloadAsync();
    }
  };
}, []);

3. 结合react-native-video实现控制 #

import Video from 'react-native-video';

// 视频播放时：暂停背景音乐+抢占音频焦点
const handleVideoPlay = async () => {
  if (!backgroundSound) return;
  
  const soundStatus = await backgroundSound.getStatusAsync();
  if (soundStatus.isPlaying) {
    // 记录当前播放位置
    pausedSoundPosition = soundStatus.positionMillis;
    await backgroundSound.pauseAsync();
  }

  // 配置音频会话，禁止其他音频播放
  await Audio.setAudioModeAsync({
    allowsRecordingIOS: false,
    playsInSilentModeIOS: true,
    interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
    interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
    shouldDuckAndroid: false,
  });
};

// 视频暂停时：恢复背景音乐+释放音频焦点
const handleVideoPause = async () => {
  if (!backgroundSound) return;
  
  // 恢复音频会话，允许背景音乐播放
  await Audio.setAudioModeAsync({
    allowsRecordingIOS: false,
    playsInSilentModeIOS: true,
    interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_MIX_WITH_OTHERS,
    interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_MIX_WITH_OTHERS,
    shouldDuckAndroid: false,
  });

  // 从暂停位置继续播放背景音乐
  await backgroundSound.playFromPositionAsync(pausedSoundPosition);
};

// 渲染视频组件
<Video
  source={{ uri: '你的视频地址' }} // 替换为实际视频URL或本地路径
  onPlay={handleVideoPlay}
  onPause={handleVideoPause}
  style={{ width: '100%', height: 300 }}
  controls={true}
/>

4. 若使用expo-av的Video组件 #

只需调整视频状态监听逻辑，核心音频控制代码不变：

import { Video } from 'expo-av';

const handleVideoStatusUpdate = async (status) => {
  if (status.isPlaying) {
    await handleVideoPlay();
  } else if (status.didJustPause) {
    await handleVideoPause();
  }
};

<Video
  source={{ uri: '你的视频地址' }}
  onPlaybackStatusUpdate={handleVideoStatusUpdate}
  style={{ width: '100%', height: 300 }}
  shouldPlay={false}
  useNativeControls={true}
/>

注意事项 #

• 权限配置：iOS需在Info.plist添加NSMicrophoneUsageDescription（即使不录音，expo-av也会要求）；Android需在AndroidManifest.xml添加android.permission.RECORD_AUDIO和android.permission.MODIFY_AUDIO_SETTINGS。
• 真实设备测试：模拟器的音频行为可能与真实设备不一致，务必在真机上验证。
• 外部音频适配：如果需要处理系统其他应用的背景音乐，可添加Audio.addAudioInterruptionListener监听音频中断事件，调整自身音频状态。

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