如何在React Native WebView中移除音频焦点？

Android 端实现 #

• 调整音频焦点策略：通过原生代码配置WebView关联的音频焦点，使用AudioManager请求允许后台音频继续播放的临时焦点。
• 代码示例（Android原生）：

  AudioManager audioManager = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
  // 请求临时焦点，允许后台音频降低音量继续播放
  int focusResult = audioManager.requestAudioFocus(
      null,
      AudioManager.STREAM_MUSIC,
      AudioManager.AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK
  );
  if (focusResult == AudioManager.AUDIOFOCUS_REQUEST_GRANTED) {
      // 初始化WebView或触发音频播放逻辑
  }
  

• 也可以在AndroidManifest.xml中给WebView所在Activity添加属性，辅助调整音频行为：

  <activity
      android:name=".MainActivity"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
      android:windowSoftInputMode="adjustResize">
  </activity>
  

iOS 端实现 #

• 配置AVAudioSession类别：设置音频会话为允许与其他音频混合的模式，确保WebView播放音频时不抢占后台音频焦点。
• 代码示例（iOS原生）：

  import AVFoundation
  
  func configureAudioSession() {
      do {
          try AVAudioSession.sharedInstance().setCategory(
              .playback,
              mode: .default,
              options: .mixWithOthers
          )
          try AVAudioSession.sharedInstance().setActive(true)
      } catch {
          print("音频会话配置失败: \(error.localizedDescription)")
      }
  }
  

• 可以在App启动时调用这个配置方法，或者在WebView加载前执行。

React Native 层辅助处理 #

• 注入JS监听音频播放事件：通过WebView的injectedJavaScript注入代码，监听网页内音频的播放动作，触发原生层的音频配置检查。
• 代码示例：

  <WebView
    source={{ uri: '你的音频页面地址' }}
    injectedJavaScript={`
      document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('audio').forEach(audio => {
          audio.addEventListener('play', () => {
            window.ReactNativeWebView.postMessage('audio-play-trigger');
          });
        });
      });
    `}
    onMessage={(event) => {
      if (event.nativeEvent.data === 'audio-play-trigger') {
        // 调用封装好的原生模块执行音频配置
      }
    }}
  />
  

如果加载的是第三方网页，注入JS可能受限于页面的安全策略，此时优先依赖原生层的全局音频配置来实现需求。

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