audiolistener 本身不响应鼠标移动，需通过 mousemove 实时更新其 position 和 setorientation，并配合 hrtf 模式的 pannernode 渲染空间音频，实现音场跟随鼠标效果。
AudioContext 的 AudioListener 本身**不直接响应鼠标移动**，它只是 Web Audio API 中表示“听者位置”的抽象对象。要实现“跟随鼠标移动的音场”（即三维空间音频随鼠标位置变化而改变声像、距离衰减等效果），关键在于：**用鼠标坐标实时更新 AudioListener 的位置和朝向，并配合 PannerNode（通常设为 spatialization 模式）来渲染空间化声音**。
1. 基础前提：启用立体声/空间音频上下文
确保 AudioContext 创建时启用了空间化支持（现代浏览器默认支持，但需用户交互触发）：
- 必须在用户手势（如
click、mousemove）回调中调用audioContext.resume()，否则音频被静音 - 使用
new AudioContext({ latencyHint: 'interactive' })提升响应性 -
AudioListener是AudioContext.listener，不可手动构造，只能通过该属性访问
2. 将鼠标坐标映射为 3D 空间坐标
网页是二维平面，需人为定义 Z 轴（深度）。常见映射方式：
- X：鼠标水平位置 → 归一化到 [-1, 1]（左→右）
- Y：鼠标垂直位置 → 归一化到 [-1, 1]（上→下），注意 Canvas/Y轴向下，可取负号让“上=正Y”
- Z：固定值或由滚轮/按键控制（如
z = -1表示听者前方1单位），避免为0（防除零）
示例（监听 mousemove）：
document.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width * 2 - 1; // [-1, 1]
const y = -(e.clientY - rect.top) / rect.height * 2 + 1; // [-1, 1], Y翻转
const z = -1; // 听者前方1单位
<p>listener.setPosition(x, y, z);
});</p>3. 设置 listener 朝向与上方向
仅设位置不够，还需定义“听者面朝哪”和“哪边是头顶”，否则声像无方向感：
listener.setOrientation(x, y, z, upX, upY, upZ)- 前向向量（
x,y,z）：指向鼠标所在方向，可用(x, y, z)归一化后作为前向 - 上向量（
upX,upY,upZ）：通常为(0, 1, 0)（Y轴向上）
补充到上面事件中：
const forward = new Float32Array([x, y, z]).normalize(); // 需自行实现normalize或用Math.hypot listener.setOrientation(forward[0], forward[1], forward[2], 0, 1, 0);
4. 关联 PannerNode 并启用空间化
AudioListener 控制“谁在听”，真正决定声音从哪来的是 PannerNode。必须：
- 创建 panner 时指定
{ pannerType: 'hrtf', distanceModel: 'inverse', ... } - 将音频源连接到 panner，再连到 destination
- （可选）设置 panner.position 为声源位置（如固定在原点
(0,0,0)），listener 移动就等效于“声源相对听者运动”
完整链路示意：
const panner = audioCtx.createPanner({
pannerType: 'hrtf',
distanceModel: 'inverse',
refDistance: 1,
maxDistance: 10000
});
panner.positionX.value = 0;
panner.positionY.value = 0;
panner.positionZ.value = 0;
<p>source.connect(panner);
panner.connect(audioCtx.destination);</p>这样，当 listener 随鼠标移动时，固定声源的空间感知就会动态变化，形成“音场跟随鼠标”的效果。注意：HRTF 渲染依赖系统支持，部分设备可能回落为简化的立体声平移（stereo panning），但仍有明显声像偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
