Web Audio API getFloatTimeDomainData偶现返回全0海森堡bug求助

• Chrome 66及以上版本实施了严格的自动播放策略，AudioContext必须在用户主动交互（点击、触摸、键盘输入等）的上下文中初始化或恢复，否则默认处于suspended挂起状态，此时整个音频处理链路不会运行，分析器只能读取到全0数据。当前在服务构造函数中初始化AudioContext，执行时机无用户交互触发，因此绝大多数场景下上下文被挂起，极少数场景刚好关联用户交互上下文可正常运行，符合无规律故障的表现。
• 次要触发原因：Chrome会对后台标签页的requestAnimationFrame和音频处理逻辑进行节流甚至暂停，切后台后读取数据也会出现全0问题。

1. 调整AudioContext恢复逻辑 #

必须将触发麦克风申请的逻辑绑定到用户主动交互事件（如按钮点击），并在获取媒体流前先恢复挂起的音频上下文，修改后代码参考：

// 该方法必须绑定到用户交互事件，例如<button (click)="startCapture()">开启录音</button>
async startCapture() {
  // 先恢复音频上下文，该操作必须在用户交互的执行栈中调用
  if (this.audioContext.state === 'suspended') {
    await this.audioContext.resume();
  }
  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
    .then(stream => {
      this.stream = stream;
      // 校验音频轨道有效性
      const audioTracks = stream.getAudioTracks();
      if (audioTracks.length === 0 || !audioTracks[0].enabled) {
        console.error('音频轨道不可用');
        return;
      }
      this.isCapturing = true;
      this.mediaStreamSource = this.audioContext.createMediaStreamSource(this.stream);
      this.mediaStreamSource.connect(this.analyser);
      this.animationFrame = requestAnimationFrame(this.streamAnalysis.bind(this));
    })
    .catch(err => console.log('[PMATIC] Error accessing mic: ', err));
}

2. 添加上下文状态监听 #

在服务构造函数中添加音频上下文状态变化监听，避免页面切后台后上下文被重新挂起：

this.audioContext = new window.AudioContext();
this.analyser = this.audioContext.createAnalyser();
this.analyser.fftSize = this.settings.values.fftSize; // 取值8192
this.audioBuffer = new Float32Array(this.analyser.fftSize);
// 新增状态监听
this.audioContext.addEventListener('statechange', () => {
  if (this.isCapturing && this.audioContext.state === 'suspended') {
    this.audioContext.resume();
  }
});

3. 可选兜底校验 #

在tuneAnalysis方法中增加数据校验，若连续多次读取到全0数据可主动触发上下文恢复和链路重建：

private tuneAnalysis():void {
  this.analyser.getFloatTimeDomainData(this.audioBuffer);
  // 校验数据有效性
  const hasValidData = this.audioBuffer.some(v => Math.abs(v) > 1e-6);
  if (!hasValidData && this.isCapturing) {
    // 触发兜底恢复逻辑
    this.audioContext.resume();
  }
}

内容的提问来源于stack exchange，提问作者Juan Vilar