JavaScript中的Web Audio API与音频处理

描述
Web Audio API是一个用于在Web应用中处理和合成音频的高级JavaScript API。它不同于简单的音频播放（如HTML5 Audio），提供了精确的音频图（Audio Graph）模型，允许开发者对音频进行复杂的处理、分析和控制。核心概念包括音频上下文（Audio Context）、节点（Node）和音频路由（Routing）。

音频上下文（Audio Context）
音频上下文是管理所有音频操作的核心容器，相当于一个音频处理的"工作台"。每个音频操作都在上下文中进行。

// 创建音频上下文（考虑浏览器兼容性）
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();

音频节点（Audio Node）
音频节点是音频处理的构建块，分为源节点（如音频文件、振荡器）、处理节点（如滤波器、增益节点）和目标节点（如扬声器）。节点通过连接形成音频路由图。

音频处理流程

1. 创建音频源：

   • 从<audio>元素获取音频：

     const audioElement = document.getElementById('myAudio');
     const source = audioContext.createMediaElementSource(audioElement);
     

   • 加载音频文件：

     async function loadAudio(url) {
       const response = await fetch(url);
       const arrayBuffer = await response.arrayBuffer();
       const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
       const source = audioContext.createBufferSource();
       source.buffer = audioBuffer;
       return source;
     }
     

   • 生成合成音频（如振荡器）：

     const oscillator = audioContext.createOscillator();
     oscillator.type = 'sine'; // 正弦波
     oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // 440Hz
     

2. 添加处理节点：

   • 增益控制（音量）：

     const gainNode = audioContext.createGain();
     gainNode.gain.value = 0.5; // 音量减半
     

   • 滤波器（如低通滤波）：

     const filter = audioContext.createBiquadFilter();
     filter.type = 'lowpass';
     filter.frequency.value = 1000; // 截止频率1kHz
     

3. 连接节点并播放：
   将源节点 → 处理节点 → 目标节点（扬声器）连接成链：

   source.connect(gainNode);
   gainNode.connect(filter);
   filter.connect(audioContext.destination);
   source.start(); // 启动音频源
   

动态控制与调度
Web Audio API支持精确的时间调度，例如实现淡入淡出效果：

// 当前音量立即设为0，2秒内线性淡入到1
gainNode.gain.setValueAtTime(0, audioContext.currentTime);
gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 2);

音频分析
通过AnalyserNode获取音频数据（如频率、波形），用于可视化：

const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(gainNode);

// 获取频率数据
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);

注意事项

1. 用户交互要求：现代浏览器要求音频上下文必须在用户操作（如点击）中启动：

   document.getElementById('playButton').addEventListener('click', () => {
     audioContext.resume(); // 恢复可能被暂停的上下文
     // 播放音频...
   });
   

2. 内存管理：停止的音频源节点需解引用以便垃圾回收。
3. 性能优化：复杂音频图应复用节点，避免频繁创建/销毁。

应用场景

• 音乐播放器（均衡器、变速）
• 游戏音效（空间化音频）
• 实时语音处理（降噪）
• 音频可视化（频谱分析）