Web Audio API使用方式是否正确？存在轻微声音失真问题

你的代码出现音频失真，核心原因是JS定时器与Web Audio音频线程不同步，导致振荡器被粗暴截断，另外还有几处细节可以优化，以下是具体修复方案：

1. 用AudioContext时间系统替代setTimeout #

setTimeout属于JS主线程，存在不可控延迟，和Web Audio的音频线程不同步，直接调用oscillator.stop()会粗暴截断音频波形，产生噼啪/失真噪音。必须用audioContext.currentTime精确控制播放时序：

修改后的核心播放逻辑：

playSequenceSound() {
  const sequence = [310, 330, 350, 370, 390, 410, 430];

  if (!this.audioContext) {
    this.audioContext = new AudioContext();
  } else if (this.audioContext.state === 'suspended') {
    // 处理浏览器后台暂停的AudioContext
    this.audioContext.resume();
  }

  const oscillator = this.audioContext.createOscillator();
  oscillator.type = 'sine';
  const gainNode = this.audioContext.createGain();
  
  const now = this.audioContext.currentTime;
  const duration = 0.1; // 对应原逻辑的100ms

  // 淡入淡出避免瞬态噪音
  gainNode.gain.setValueAtTime(0, now);
  gainNode.gain.linearRampToValueAtTime(0.05, now + 0.01); // 快速淡入
  gainNode.gain.exponentialRampToValueAtTime(0.001, now + duration); // 缓慢淡出

  oscillator.connect(gainNode);
  gainNode.connect(this.audioContext.destination);
  oscillator.frequency.setValueAtTime(this.tone, now);
  
  oscillator.start(now);
  // 精确安排停止时间，播放完成后自动释放资源
  oscillator.stop(now + duration);
  oscillator.onended = () => {
    oscillator.disconnect();
    gainNode.disconnect();
    // 用取模运算安全循环切换音调
    const currentIndex = sequence.indexOf(this.tone);
    this.tone = sequence[(currentIndex + 1) % sequence.length];
  };
}

2. 新增淡入淡出逻辑 #

即使同步了时序，突然启动/停止振荡器也会产生瞬态噪音。通过增益节点的平滑过渡：

• 启动时快速淡入到目标音量
• 结束前缓慢淡出到接近0的音量，再停止振荡器

3. 优化音调切换逻辑 #

原逻辑用sequence.indexOf(this.tone)判断最后一位的写法太繁琐，用取模运算(currentIndex + 1) % sequence.length可以直接实现循环切换，无需额外判断。

4. 处理AudioContext后台暂停状态 #

浏览器会在页面后台时自动暂停AudioContext，下次调用时需要手动恢复，否则会出现播放无响应的情况。

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