Web Audio API 通过 PannerNode 实现 3D 定位（支持 HRTF、距离衰减、多普勒效应），配合 ConvolverNode 加载 IR 模拟真实声场，并结合 DeviceOrientation API 实现头部追踪，需注意兼容性降级与性能优化。
Web Audio API 提供了强大的音频处理能力，空间音效（Spatial Audio）和声场模拟（如 3D 音效、环绕声）可通过 PannerNode 与 ConvolverNode 实现，核心在于控制声音源的位置、方向、距离衰减，以及叠加真实环境的声学响应。
用 PannerNode 实现基础 3D 定位
PannerNode 是 Web Audio 中处理空间化的核心节点，支持笛卡尔坐标系（x/y/z）定位，并自动计算多普勒效应、距离衰减和方位角/俯仰角。它默认使用 HRTF（头部相关传输函数）模型，能在立体声耳机上模拟出较自然的左右/前后/上下方向感。
- 创建时指定
pannerType: 'hrtf'（推荐），或'equalpower'（简单双耳平衡，无深度感） - 设置
position、orientation和refDistance控制听感距离：小于 refDistance 声音不衰减，大于则按 rolloffFactor 衰减 - 启用
setVelocity()可触发多普勒频移（移动声源时音调微变） - 注意：需在用户手势（如点击）后首次播放音频，否则多数浏览器会因 Autoplay Policy 拒绝启动音频上下文
用 ConvolverNode 加载真实声场响应
仅靠 PannerNode 无法还原房间混响、反射、遮挡等复杂声学特性。此时可用 ConvolverNode 加载 IR（Impulse Response）音频文件，对干声做卷积运算，模拟特定空间（如教堂、隧道、小卧室）的声学指纹。
- IR 文件通常为单声道、短时长（0.5–3 秒）、16 或 32 位 PCM WAV 格式
- 通过
fetch()加载 IR 后用audioContext.decodeAudioData()解码，再赋给convolverNode.buffer - 建议将 ConvolverNode 放在 PannerNode 后、Destination 前，先定位再加混响，更符合物理逻辑
- 注意性能：长 IR 会显著增加 CPU 开销；可预处理 IR（截断、降采样）或使用 WebAssembly 加速卷积
结合 Orientation 与 Listener 实现沉浸式交互
要让声音随用户头部转动实时变化（如 VR 场景），需同步更新 AudioListener 的朝向与上方向，并绑定设备方向事件（DeviceOrientation API）。
立即学习“前端免费学习笔记（深入）”；
- 获取
audioContext.listener，调用setPosition()和setOrientation()更新监听者姿态 - 监听
deviceorientation事件，将alpha（罗盘）、beta（俯仰）、gamma（横滚）映射为三维旋转矩阵 - 避免高频更新导致抖动：用
requestAnimationFrame节流，或对陀螺仪数据做低通滤波 - 移动端需手动请求权限：
DeviceOrientationEvent.requestPermission()（iOS 13+、Android Chrome 95+）
兼容性与性能优化要点
空间音频在不同平台表现差异较大，尤其在移动端和旧版浏览器中需合理降级。
- HRTF 支持：Chrome / Edge ≥ 71，Firefox ≥ 66，Safari 仅部分支持（iOS 16.4+ 有改进）
- 若
pannerType === 'hrtf'不可用，回退到'equalpower'并关闭多普勒与锥形辐射（cone settings） - 避免每帧重连 AudioNode；复用 PannerNode，仅更新参数（position/orientation）
- 大量声源时启用
disableOutput（实验性）或用 Web Worker 预计算位置逻辑，减轻主线程压力
不复杂但容易忽略：空间音效的真实感不仅来自技术参数，更依赖内容设计——比如合理设置声源尺寸、材质反射系数、环境噪声基底，才能让虚拟声场真正“可信”。
