Safari中跨函数使用THREE.AudioListener添加音频无法播放的问题

核心原因：Safari严格的AudioContext激活策略 #

THREE.AudioListener底层依赖Web Audio API的AudioContext对象，而Safari对这个对象的激活有严格限制：

• AudioContext必须在用户主动交互（如鼠标点击、触摸）的回调函数内才能被激活，否则会处于suspended（挂起）状态。
• 若提前创建THREE.AudioListener（比如在页面加载时、非交互回调里），对应的AudioContext会直接进入挂起状态，后续即使在点击回调里创建THREE.Audio并调用play()，也无法自动唤醒这个挂起的上下文，导致音频无法播放。

对比两种代码的差异：

1. 可行代码：在点击回调内创建listener，此时AudioContext在用户交互上下文里初始化，直接进入running状态，后续播放正常。
2. 不可行代码：提前创建listener，AudioContext在无用户交互时初始化，处于挂起状态，点击时的play()无法触发上下文唤醒，所以Safari里无声。

Chrome和Firefox能正常工作，是因为它们放宽了这一限制——允许后续用户交互唤醒挂起的AudioContext，或者直接允许非交互场景初始化上下文进入运行状态。

解决办法 #

方案1：首次点击时初始化Listener，后续复用 #

把listener的创建逻辑放在第一次用户点击的回调里，确保AudioContext在交互上下文激活：

let listener = null;

// 鼠标点击触发的函数
function f() {
  // 首次点击时创建listener
  if (!listener) {
    listener = new THREE.AudioListener();
  }
  
  const audio = new THREE.Audio(listener);
  const file = <audio file>;
  const loader = new THREE.AudioLoader();
  
  loader.load(file, function(buffer) {
    audio.setBuffer(buffer);
    audio.play();
  });
}

方案2：提前创建Listener，点击时手动唤醒上下文 #

如果必须提前初始化listener，可以在每次点击时检查并唤醒挂起的AudioContext：

const listener = new THREE.AudioListener();

// 鼠标点击触发的函数
function f() {
  // 唤醒挂起的音频上下文
  if (listener.context.state === 'suspended') {
    listener.context.resume();
  }
  
  const audio = new THREE.Audio(listener);
  const file = <audio file>;
  const loader = new THREE.AudioLoader();
  
  loader.load(file, function(buffer) {
    audio.setBuffer(buffer);
    audio.play();
  });
}

验证方式 #

可以在控制台打印listener.context.state：

• 提前创建listener时，初始状态为suspended；
• 点击后若未处理，状态仍为suspended；
• 按上述方案处理后，状态会变为running，音频即可正常播放。

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