求助调试HTML5 Audio原生JavaScript立体声VU Meter右声道异常

近两日我一直在排查一款基于原生JavaScript开发、适配HTML5 Audio元素的模拟风格立体声VU Meter问题：在Chromium与Firefox浏览器中测试，均出现右声道（Channel 2）无响应的情况。页面加载时，两个Meter的指针应处于相近的就绪状态，但右声道表现不符预期，且完全不响应播放的音频。

问题根源 #

1. AnalyserNode无法直接分离立体声通道：默认AnalyserNode会混合立体声左右声道输出频率数据，无法通过数组索引直接拆分左右通道，这是右声道数据错误的核心原因。
2. 数组索引计算错误：原代码中i + numChannels - 1的索引逻辑会导致越界，当i取最大值时，索引超出frequencyData数组长度，读取到无效数据。

修复方案 #

使用ChannelSplitterNode拆分立体声通道，为左右声道分别配置独立的AnalyserNode，实现声道数据的独立采集：

完整修复代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>VU Meter</title>
  <style>
    #vu-meter-container {
      display: flex;
      justify-content: center;
    }

    .vu-meter {
      width: 200px;
      height: 150px;
      position: relative;
      margin: 0 10px;
    }

    .vu-meter .scale {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      perspective: 1000px;
    }

    .vu-meter .scale .scale-arc {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: absolute;
      box-sizing: border-box;
      border: 2px solid lightgray;
      transform-origin: center;
      transform-style: preserve-3d;
    }

    .vu-meter .scale .scale-arc::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px;
      height: 100%;
      background-color: lightgray;
      transform-origin: center;
      transform: translateX(-50%);
    }

    .vu-meter .scale .scale-range {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: center;
      transform-style: preserve-3d;
    }

    .vu-meter .scale .scale-range--normal {
      background-color: green;
      transform: rotateX(0deg);
    }

    .vu-meter .scale .scale-range--peak {
      background-color: red;
      transform: rotateX(14deg);
    }

    .needle-container {
      width: 100%;
      height: 100%;
      position: relative;
      background: #dfc68d;
    }

    .needle {
      width: 2px;
      height: 90px;
      background-color: red;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform-origin: bottom center;
      transform: translateX(-50%) rotate(-140deg);
      transition: transform 0.2s;
    }

    .minus {
      position: absolute;
      top: 5px;
      left: 5px;
      color: black;
      font-weight: bold;
    }

    .plus {
      position: absolute;
      top: 5px;
      right: 5px;
      color: red;
      font-weight: bold;
    }

    .vu-meter-label {
      text-align: center;
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
<header>
  <h1>VU Meter</h1>
</header>
<main>
  <div id="vu-meter-container">
    <div id="vu-meter1" class="vu-meter">
      <div class="scale">
        <div class="scale-arc">
          <div class="scale-range scale-range--normal"></div>
          <div class="scale-range scale-range--peak"></div>
        </div>
      </div>
      <div class="needle-container">
        <div class="minus">-</div>
        <div class="plus">+</div>
        <div class="needle"></div>
      </div>
      <div class="vu-meter-label">Channel 1</div>
    </div>
    <div id="vu-meter2" class="vu-meter">
      <div class="scale">
        <div class="scale-arc">
          <div class="scale-range scale-range--normal"></div>
          <div class="scale-range scale-range--peak"></div>
        </div>
      </div>
      <div class="needle-container">
        <div class="minus">-</div>
        <div class="plus">+</div>
        <div class="needle"></div>
      </div>
      <div class="vu-meter-label">Channel 2</div>
    </div>
  </div>
  <div class="player">
    <audio id="audio" controls>
      <source src="https://rulerandcompass.net/music/BourreeInEMinor.mp3" type="audio/mpeg" id="src" />
    </audio>
  </div>
</main>
<footer></footer>
<script>
window.addEventListener('DOMContentLoaded', () => {
  const audio = document.getElementById('audio');
  const needle1 = document.querySelector('#vu-meter1 .needle');
  const needle2 = document.querySelector('#vu-meter2 .needle');

  // 初始化音频上下文
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const sourceNode = audioContext.createMediaElementSource(audio);

  // 创建通道拆分器，分离立体声左右声道
  const splitterNode = audioContext.createChannelSplitter(2);
  sourceNode.connect(splitterNode);

  // 为左右声道分别创建分析器节点
  const analyserLeft = audioContext.createAnalyser();
  const analyserRight = audioContext.createAnalyser();
  analyserLeft.fftSize = 2048;
  analyserRight.fftSize = 2048;

  // 将拆分后的声道连接到对应分析器
  splitterNode.connect(analyserLeft, 0);
  splitterNode.connect(analyserRight, 1);

  // 连接分析器到输出，保证音频正常播放
  analyserLeft.connect(audioContext.destination);
  analyserRight.connect(audioContext.destination);

  // 创建存储左右声道频率数据的数组
  const frequencyDataLeft = new Uint8Array(analyserLeft.frequencyBinCount);
  const frequencyDataRight = new Uint8Array(analyserRight.frequencyBinCount);

  // 更新VU表指针的函数
  function updateVUMeters() {
    // 获取左右声道的频率数据
    analyserLeft.getByteFrequencyData(frequencyDataLeft);
    analyserRight.getByteFrequencyData(frequencyDataRight);

    // 计算左声道平均音量
    let totalVolumeLeft = 0;
    for (let value of frequencyDataLeft) {
      totalVolumeLeft += value;
    }
    const averageVolumeLeft = totalVolumeLeft / frequencyDataLeft.length;

    // 计算右声道平均音量
    let totalVolumeRight = 0;
    for (let value of frequencyDataRight) {
      totalVolumeRight += value;
    }
    const averageVolumeRight = totalVolumeRight / frequencyDataRight.length;

    // 计算指针旋转角度
    const angleLeft = (averageVolumeLeft / 255) * 140 - 140 + 90;
    const angleRight = (averageVolumeRight / 255) * 140 - 140 + 90;

    // 应用旋转并保证指针居中
    needle1.style.transform = `translateX(-50%) rotate(${angleLeft}deg)`;
    needle2.style.transform = `translateX(-50%) rotate(${angleRight}deg)`;

    requestAnimationFrame(updateVUMeters);
  }

  // 启动VU表更新
  updateVUMeters();

  // 处理浏览器音频上下文自动暂停限制
  document.addEventListener('click', () => {
    if (audioContext.state === 'suspended') {
      audioContext.resume();
    }
  });
});
</script>
</body>
</html>

额外优化点 #

• 恢复了指针的translateX(-50%)属性，保证指针在容器中心旋转，修正视觉偏移问题。
• 添加了用户交互恢复音频上下文的逻辑，解决浏览器要求用户手动触发音频播放的限制。

内容的提问来源于stack exchange，提问作者Mark Lee