本文介绍在 web audio api 中安全、高效地切换 `
在使用 Web Audio API 实现 3D 音频空间化（例如通过 PannerNode）时，一个常见误区是：直接复用同一个 MediaElementSourceNode 并试图将其绑定到新的 <audio> 元素上。但根据规范，每个 HTMLMediaElement 实例只能被一个 MediaElementSourceNode 关联；反之，一个 MediaElementSourceNode 也不可重新绑定到另一个 <audio> 元素——它与创建时传入的媒体元素存在强绑定关系。
因此，当你调用 audioContext.createMediaElementSource(audioElement) 后，该 audioSource 就“锁定”了原始 audioElement。若后续更换 <audio> 元素却仍尝试 audioSource.connect(pannerNode)，虽然不报错，但音频数据流实际已中断（旧元素已暂停/替换），而新元素未接入音频图，导致 panning 效果失效。
✅ 正确做法是：为每个 <audio> 元素按需创建（或复用）专属的 MediaElementSourceNode，同时保持效果图（pannerNode → destination）不变。推荐使用 WeakMap 缓存已创建的 source 节点，兼顾性能与内存安全：
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
const weakMap = new WeakMap();
// 初始化首个音频源
const initialAudioEl = document.getElementById('fire-source');
let audioSource = audioContext.createMediaElementSource(initialAudioEl);
weakMap.set(initialAudioEl, audioSource);
const pannerNode = audioContext.createPanner();
pannerNode.panningModel = 'HRTF'; // 推荐启用高保真空间模型
pannerNode.distanceModel = 'inverse';
audioSource.connect(pannerNode).connect(audioContext.destination);切换音频时，只需断开旧 source、获取/创建新 source，并重新接入同一 pannerNode：
function audioSelector() {
// 1. 断开当前 source（注意：disconnect 不影响 pannerNode 自身状态）
if (audioSource) {
audioSource.disconnect(pannerNode);
}
// 2. 获取用户选择的新 audio 元素
const selectEl = document.getElementById('audio-select');
const newAudioId = selectEl.value;
const newAudioEl = document.getElementById(`${newAudioId}-source`);
// 3. 从缓存中取已存在的 source，或新建
audioSource = weakMap.get(newAudioEl);
if (!audioSource) {
audioSource = audioContext.createMediaElementSource(newAudioEl);
weakMap.set(newAudioEl, audioSource);
}
// 4. 重新连接至原有 pannerNode（效果链完全保留）
audioSource.connect(pannerNode);
// ✅ 可选：自动播放（需用户手势触发后才有效）
if (audioContext.state === 'suspended') {
audioContext.resume(); // 确保上下文激活
}
newAudioEl.currentTime = 0; // 重置播放位置
newAudioEl.play().catch(e => console.warn('Play failed:', e));
}⚠️ 关键注意事项：
- 必须调用 audioContext.resume()：现代浏览器要求用户交互后才能启动音频上下文，切换前请确保上下文已激活；
- 不要忽略 play() 的 Promise：失败时需捕获并提示（如静音策略限制）；
- WeakMap 是最佳实践：避免内存泄漏，当 <audio> 元素被移除 DOM 后，其关联的 MediaElementSourceNode 可被 GC 回收；
- pannerNode 状态完全独立：位置、orientation、distance 等参数无需重设，复用即生效；
- 若需跨页面/长生命周期管理，可扩展为 Map + 手动清理，但多数场景 WeakMap 更安全。
通过此方案，你既能灵活切换多个音效文件，又能无缝维持完整的空间音频处理链，真正实现“换源不换效”。
