如何实现鼠标指针移动时控制立体声变化的效果？

核心实现逻辑 #

核心是基于Web Audio API的StereoPannerNode接口，将鼠标水平位置实时映射为声道平移参数：

• StereoPannerNode的pan参数取值范围为-1到1，-1表示声音完全从左声道输出，1表示完全从右声道输出，0为居中
• 监听页面mousemove事件，获取鼠标在视口内的横坐标，将坐标从[0, 视口宽度]区间线性映射到[-1, 1]区间，赋值给pan参数即可实现鼠标移动控制立体声效果

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<body>
  <button id="playBtn">点击播放音频</button>
  <p>左右移动鼠标即可切换立体声左右声道权重</p>
  <script>
    let audioContext, pannerNode, audioSource;
    const playBtn = document.getElementById('playBtn');

    // 初始化音频链路
    async function initAudio() {
      audioContext = new (window.AudioContext || window.webkitAudioContext)();
      // 创建立体声平移节点
      pannerNode = audioContext.createStereoPanner();
      // 这里可以替换为自己的音频文件地址，示例用振荡器生成测试音，也可以用AudioElement加载外部音频
      audioSource = audioContext.createOscillator();
      audioSource.frequency.value = 440;
      // 连接链路：音源 → 立体声平移节点 → 输出设备
      audioSource.connect(pannerNode);
      pannerNode.connect(audioContext.destination);
      audioSource.start();
    }

    // 鼠标移动事件监听
    document.addEventListener('mousemove', (e) => {
      if (!pannerNode) return;
      // 坐标映射：视口x坐标 → [-1, 1]区间
      const panValue = (e.clientX / window.innerWidth) * 2 - 1;
      // 可添加过渡效果让变化更顺滑，替换上面的直接赋值即可：
      // pannerNode.pan.linearRampToValueAtTime(panValue, audioContext.currentTime + 0.1);
      pannerNode.pan.value = panValue;
    });

    // 浏览器要求音频上下文必须在用户交互后激活
    playBtn.addEventListener('click', async () => {
      if (!audioContext) {
        await initAudio();
        playBtn.textContent = '音频播放中';
      }
    });
  </script>
</body>
</html>

优化建议 #

• 可以添加linearRampToValueAtTime方法给pan参数设置过渡时间，避免鼠标快速移动时声道跳变产生的刺耳感
• 如果需要兼容极低版本浏览器，可以用PannerNode替代StereoPannerNode，设置对应水平位置参数即可
• 鼠标移出视口时可以加判断，自动把pan值重置为0，避免声道一直偏在一侧

内容的提问来源于stack exchange，提问作者Pé Na