如何在JavaScript中获取A-Frame里由THREE.js创建的现有AudioContext？

要获取A-Frame场景里由THREE.js创建的Web Audio上下文，你可以通过以下几种方式实现：

方法一：从sound组件直接提取 #

A-Frame的sound组件内部依赖THREE.js的AudioListener，而这个Listener持有Web Audio上下文的引用：

// 获取带有sound组件的实体
const soundEntity = document.querySelector('[sound]');
// 提取THREE.js的AudioListener实例
const audioListener = soundEntity.components.sound.listener;
// 获取Web Audio上下文
const audioContext = audioListener.context;

方法二：从相机的Three.js对象获取 #

A-Frame默认会给相机实体绑定AudioListener，你可以从相机对应的Three.js对象中拿到上下文：

// 获取场景中的相机实体
const camera = document.querySelector('[camera]');
// 获取相机对应的Three.js PerspectiveCamera实例
const threeCamera = camera.object3D;
// 从listener中提取音频上下文
const audioContext = threeCamera.listener.context;

方法三：通过THREE.js全局API获取 #

THREE.js会缓存已创建的音频上下文，你可以直接调用全局API获取：

// 获取THREE.js缓存的Web Audio上下文
const audioContext = THREE.AudioContext.getContext();

连接自定义AudioNode示例 #

拿到上下文后，你就可以创建并接入自定义节点（比如ConvolverNode）：

// 创建卷积节点
const convolver = audioContext.createConvolver();
// 加载脉冲响应文件并设置给卷积节点
fetch('impulse-response.wav')
  .then(res => res.arrayBuffer())
  .then(buf => audioContext.decodeAudioData(buf))
  .then(irBuffer => {
    convolver.buffer = irBuffer;
    // 重构音频链路：断开原有连接，插入自定义节点
    const soundSource = soundEntity.components.sound.source;
    soundSource.disconnect();
    soundSource.connect(convolver);
    convolver.connect(audioContext.destination);
  });

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