HTML5 audio标签在安卓react-native-webview失效 iOS端运行正常

1. 调整WebView组件配置 #

给WebView添加以下属性，覆盖安卓默认的媒体播放限制：

<WebView
  source={{ uri: '你的目标页面地址' }}
  // 基础功能配置
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowFileAccess={true}
  // 媒体播放专属配置
  mediaPlaybackRequiresUserAction={false}
  allowsInlineMediaPlayback={true}
  // 安卓硬件加速配置（音视频解码必需）
  androidLayerType="hardware"
  androidHardwareAccelerationDisabled={false}
  // 混合资源加载兼容配置
  mixedContentMode="always"
/>

• mediaPlaybackRequiresUserAction设置为false可解除安卓默认的「需用户主动交互才能触发媒体播放」限制
• 务必确保WebView层级开启硬件加速，若你在App的Activity层级关闭了全局硬件加速，需单独给WebView开启

2. 补充安卓Manifest权限 #

检查android/app/src/main/AndroidManifest.xml，添加缺失的音频相关权限：

<!-- 基础网络权限（一般默认已配置） -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 音频播放必需权限 -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<!-- 若页面音频涉及录制功能，额外添加以下权限 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

3. 验证react-native-webview版本兼容性 #

你当前使用的10.3.2属于较老旧版本，存在已知的安卓媒体组件兼容性bug，可尝试：

• 升级到11.26.1版本（RN 0.60+通用稳定版，经过大量生产环境验证）
• 或降级到9.4.0版本，测试问题是否消失

4. 额外排查方案 #

若以上操作后问题仍存在，可在WebView加载完成后注入JS强制激活audio标签：

const injectedAudioFixJS = `
  document.querySelectorAll('audio').forEach(audioEl => {
    audioEl.muted = false;
    audioEl.disabled = false;
    audioEl.load();
  });
  true;
`;

// WebView组件添加注入JS属性
injectedJavaScript={injectedAudioFixJS}

内核适配排查 #

安卓7.0自带的系统WebView内核版本较低，对HTML5 audio的支持存在大量缺陷，可检查测试设备的「Android System WebView」应用版本，若版本低于50，升级到最新版本后再测试。

内容的提问来源于stack exchange，提问作者gary mc gale