React 360在Safari中报错：找不到变量AudioContext的解决办法

我来帮你搞定这个问题，这个报错主要是Safari对音频API的限制和React 360默认初始化逻辑的冲突导致的，下面给你两种可行的解决方案：

为什么会出现这个错误？ #

Safari有两个关键限制：

1. 交互触发要求：AudioContext必须在用户主动触发的交互（比如点击、触摸）里创建，不能在页面加载时自动初始化；
2. 前缀兼容：旧版Safari里AudioContext的前缀是webkitAudioContext，直接用标准名会找不到。

而React 360默认会自动初始化音频模块，这个过程通常发生在页面加载阶段，刚好踩中了Safari的限制，所以报错。

方案1：直接禁用音频模块（快速解决） #

如果你的360场景不需要音频功能，这是最省事的办法——初始化时手动指定nativeModules，只保留必要的模块，去掉音频相关的部分。

修改你的初始化代码：

import {ReactInstance, Environment} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    // 自定义nativeModules，只保留环境模块，移除音频模块
    nativeModules: [
      new Environment(r360.compositor.getEnvironment())
      // 删掉原来默认的音频模块初始化函数
    ],
    ...options,
  });
}

window.React360 = {init};

这样React 360就不会尝试创建AudioContext，直接避开错误。

方案2：兼容Safari的音频初始化（保留音频功能） #

如果你需要用到音频，就得调整初始化时机，满足Safari的交互要求，同时兼容前缀：

1. 修改初始化逻辑，把它绑定到用户的首次点击事件：

import {ReactInstance} from 'react-360-web';

let r360Instance = null;

function initReact360(bundle, parent) {
  // 先兼容Safari的AudioContext前缀
  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  
  r360Instance = new ReactInstance(bundle, parent, {
    fullScreen: true,
  });
}

// 监听页面首次点击，触发初始化（只执行一次）
document.addEventListener('click', () => {
  if (!r360Instance) {
    initReact360('./index.bundle', document.getElementById('react-360-root'));
  }
}, { once: true });

2. 在页面容器里加个提示，引导用户点击：

<div id="react-360-root">
  <p>点击页面启动360体验</p>
</div>

这样就能符合Safari的要求，顺利初始化音频模块了。

小提示 #

React 360默认的nativeModules包含环境模块和音频模块，如果你自定义这个数组，记得保留你需要的其他模块，别不小心删掉必要功能哦。

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