如何让react-native-webview音频与其他应用混音/压低音量共存？

默认情况下，WebView播放带音频的视频会抢占系统音频焦点，导致后台应用（如Spotify）的音频暂停——这是因为系统默认将视频音频设为"独占"模式，而静音播放时无音频输出，所以不会触发焦点抢占。要实现类似react-native-video中mixWithOthers的混音效果，需要分别针对iOS和Android配置音频会话策略：

iOS 端实现方式 #

iOS需要修改音频会话类别，允许混音播放。推荐使用react-native-audio-session库快速配置，无需手动修改原生代码：

1. 安装依赖：

npm install react-native-audio-session
# 或
yarn add react-native-audio-session

2. 在组件中配置音频会话：

import React, { useEffect, useRef } from 'react';
import { WebView, Platform } from 'react-native';
import AudioSession from 'react-native-audio-session';

const VideoWebView = ({ videoId, controls, muted, scalesPageToFit, onBridgeMessage }) => {
  const webViewRef = useRef(null);

  useEffect(() => {
    const setupAudioSession = async () => {
      if (Platform.OS !== 'ios') return;
      
      try {
        // 设置音频会话为播放模式，允许与其他音频混音
        await AudioSession.setCategory(
          AudioSession.Category.Playback,
          {
            mixWithOthers: true,
            // 若需要压低后台语音类音频（如播客、电话），可开启下面选项
            // interruptSpokenAudioAndMixWithOthers: true,
          }
        );
        await AudioSession.setActive(true);
      } catch (err) {
        console.error('音频会话配置失败:', err);
      }
    };

    setupAudioSession();

    // 组件卸载时关闭音频会话
    return () => {
      if (Platform.OS === 'ios') {
        AudioSession.setActive(false).catch(err => console.error(err));
      }
    };
  }, []);

  return (
    <WebView
      allowsInlineMediaPlayback
      mediaPlaybackRequiresUserAction={true}
      allowsFullscreenVideo={false}
      source={{ html: player(videoId, controls, muted) }}
      ref={webViewRef}
      onMessage={onBridgeMessage}
      scalesPageToFit={scalesPageToFit}
      onNavigationStateChange={(a) => { console.log("onNavigationStateChange", a?.url) }}
    />
  );
};

export default VideoWebView;

Android 端实现方式 #

Android需要配置音频属性，允许媒体音频与其他应用混音。可以通过两种方式实现：

方式1：使用第三方库快速配置 #

安装react-native-audio-manager（或类似功能的库），在视频播放前设置混音模式：

import { NativeModules, Platform } from 'react-native';

// 在组件的useEffect中添加
if (Platform.OS === 'android') {
  const AudioManager = NativeModules.AudioManager;
  // 设置混音模式，允许与其他音频同时播放
  AudioManager.setMixMode(true);
}

方式2：修改原生代码（无需第三方库） #

如果不想依赖第三方库，可以修改React Native WebView的原生代码：

1. 找到Android项目中的RNCWebViewManager.java文件
2. 在创建MediaPlayer的逻辑中，添加音频属性配置：

import android.media.AudioAttributes;
import android.media.AudioManager;
import android.media.MediaPlayer;

// 找到初始化MediaPlayer的位置，添加以下代码
MediaPlayer mediaPlayer = new MediaPlayer();
AudioAttributes audioAttributes = new AudioAttributes.Builder()
    .setUsage(AudioAttributes.USAGE_MEDIA)
    .setContentType(AudioAttributes.CONTENT_TYPE_VIDEO)
    .setFlags(AudioAttributes.FLAG_AUDIBILITY_ENFORCED)
    // 允许与其他应用音频混音
    .setAllowedCapturePolicy(AudioAttributes.ALLOW_CAPTURE_BY_ALL)
    .build();
mediaPlayer.setAudioAttributes(audioAttributes);
mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);

注意事项 #

• iOS上，mixWithOthers仅允许音频混音，若需要压低后台音量，需结合interruptSpokenAudioAndMixWithOthers选项，但该选项仅对语音类音频生效（如播客、语音导航），音乐类音频仍保持正常音量。
• Android部分设备可能因系统限制，需要在应用设置中开启"允许与其他应用同时播放音频"的权限。
• 若WebView中的HTML5视频有自定义播放逻辑，需确保在播放触发时同步调用音频会话配置（比如通过onMessage接收网页端的播放事件，再执行音频配置）。

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