React Native中Expo AV录音与后台YouTube视频音频平衡问题

1. 调整iOS音频会话配置，禁用自动压低其他音频 #

iOS默认在激活麦克风时会自动压低媒体音量（ducking），这是使用MixWithOthers时视频音量变弱的核心原因。通过添加duckOthersIOS: false配置可以关闭该系统行为，同时保持录音与视频音频的混合播放：

import { Audio } from 'expo-av';

// 初始化音频会话
await Audio.setAudioModeAsync({
  allowsRecordingIOS: true,
  interruptionModeIOS: Audio.InterruptionModeIOS.MixWithOthers,
  duckOthersIOS: false, // 关键：禁用系统自动压低其他音频
  playsInSilentModeIOS: true,
  shouldDuckAndroid: false,
});

2. 手动控制视频音量 #

根据使用的视频组件类型，分别实现音量控制：

• react-native-youtube-iframe：直接使用组件的volume属性，取值范围为0-1（0为静音，1为最大音量）：

  <YoutubeIframe
    videoId="YOUR_VIDEO_ID"
    volume={0.5} // 设置为50%音量
    // 其他属性配置
  />
  

• WebView：通过注入JavaScript代码控制页面内视频元素的音量，需确保视频加载完成后执行：

  <WebView
    source={{ uri: 'YOUR_VIDEO_URL' }}
    injectedJavaScript={`
      setTimeout(() => {
        const video = document.querySelector('video');
        if (video) video.volume = 0.5;
      }, 1000);
    `}
    javaScriptEnabled={true}
    // 其他属性配置
  />
  

  注：若视频加载较慢，可调整延迟时间，或监听WebView的onLoad事件后执行音量设置逻辑。

3. 优化初始化顺序 #

确保音频会话配置完成后，再启动录音和加载视频，避免会话状态冲突：

// 1. 先完成音频会话配置
await Audio.setAudioModeAsync(/* 上述配置项 */);
// 2. 启动录音
const { recording } = await Audio.Recording.createAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY);
// 3. 加载视频组件（此时视频不会被系统自动压低音量）

关键说明 #

• 配置duckOthersIOS: false后，iOS系统不再自动干预视频音量，麦克风可正常录制，同时你能完全通过代码控制视频音量。
• 若部分视频源（如Reddit）仍存在音量问题，可检查WebView注入脚本是否正确定位到视频元素，部分网站可能嵌套多层iframe，需调整选择器或使用更通用的方式查找视频元素。

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