Web Audio API 音频处理

Web Audio API：AudioContext音频上下文、OscillatorNode振荡器/ GainNode增益音量、BiquadFilterNode滤波器、AudioBuffer播放/录制、AnalyserNode频谱可视化（柱状图/波形图） · 难度：入门 · +10XP

Web Audio API —— 在浏览器中做音乐

不只是播放音乐文件。Web Audio API可以合成声音、添加音效、可视化频谱——浏览器就是一个迷你音乐工作室。

基本结构

const audioCtx = new AudioContext();
// 创建一个振荡器（音源）
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine';    // 波形：sine/square/sawtooth/triangle
oscillator.frequency.value = 440; // 频率440Hz = A4音
// 创建增益节点（音量控制）
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
// 连接：音源 → 音量 → 输出
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.start();
setTimeout(() => oscillator.stop(), 1000); // 播放1秒

动手练习

1. 基础练习：用Web Audio API播放DO-RE-MI音阶（C4到B4）。
2. 进阶应用：做一个频谱可视化——用AnalyserNode分析音频频率，Canvas柱状图显示。
3. 项目实战：做一个在线钢琴——键盘按键对应不同音符。