html5的标签不支持3d音效，必须通过web audio api的pannernode与audiolistener协同实现空间音频；pannernode负责声源定位，需配置hrtf模型、inverse距离模型及三维坐标，audiolistener代表听者视角且需同步相机位置，链路中不可跳过pannernode。
HTML5 的 <audio></audio> 标签本身不支持 3D 音效，所有空间化处理必须通过 Web Audio API 完成。核心在于用 PannerNode 模拟声源位置，并配合 AudioListener 构建听者视角——两者协同才能产生左右、前后、上下乃至远近的方位感。
必须用 PannerNode，不能只靠 audio 元素
原生 <audio></audio> 标签没有 positionX、panningModel 等属性。加 data-position 或用 CSS transform: translateZ() 对声音毫无影响。真正起作用的是 JavaScript 创建的 PannerNode，它才是空间音频链路中不可替代的“定位引擎”。
正确配置坐标系与空间模型
Web Audio 使用右手笛卡尔坐标系：X 向右、Y 向上、Z 向前（即朝向听者）。
关键设置包括：
-
panner.panningModel = 'HRTF'：启用头部相关传递函数，实现双耳方位识别（推荐，不支持时会降级为'equalpower'） -
panner.distanceModel = 'inverse'：让音量随距离自然衰减，增强纵深感 -
panner.refDistance = 1、panner.maxDistance = 100：定义基准距离和有效范围，单位是米 -
panner.positionX.value、.positionY.value、.positionZ.value：设置声源在三维空间中的坐标
监听器（AudioListener）不是可选配件AudioContext.listener 是全局唯一的听者节点，必须显式参与计算：
- 它默认位于原点
(0, 0, 0)，朝向-Z方向（即正前方为(0, 0, -1)），头顶方向为(0, 1, 0) - 若需“转头听声”，要动态更新
listener.forwardX/Y/Z和listener.upX/Y/Z - 声源位置是相对于 listener 的相对坐标，因此在 3D 场景（如 Three.js）中，需每帧将相机位置同步给
listener.setPosition()，再把模型位置转换为相对坐标传给panner.setPosition()
连接链路不能跳过 PannerNode
标准音频路径必须包含该节点：MediaElementAudioSourceNode（或 AudioBufferSourceNode）
→ PannerNode
→ AudioDestinationNode
跳过 PannerNode 直接连到 destination，就等同于关闭空间化，无论坐标怎么设都无效。
另外注意：移动端首次播放需用户手势触发 audioContext.resume()，否则所有参数设置静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
