Web Audio API 通过 AudioContext 管理音频节点图，支持加载音频、实时处理与可视化及合成音效。1. 使用 fetch 和 decodeAudioData 加载并播放音频文件；2. 利用 AnalyserNode 获取频域及时域数据实现音频可视化；3. 通过 OscillatorNode 生成不同波形创建合成音效；所有操作需在用户交互后启动上下文以避免自动播放限制，结合 Canvas 可构建丰富交互式音频应用。
Web Audio API 是一套强大的 JavaScript 工具，用于在浏览器中处理和操作音频。它不仅支持播放音频文件，还能进行音效合成、音频分析、滤波、空间化等复杂操作，广泛应用于音乐应用、游戏音效、语音处理和可视化项目中。
核心概念：AudioContext 与音频节点
所有 Web Audio API 操作都从 AudioContext 开始。它是整个音频处理图的入口，负责创建、连接和管理音频节点。
音频处理通过构建“节点图”实现，主要由三类节点构成：
-
源节点（Source Node）：如
audio元素、音频文件解码数据或振荡器（OscillatorNode） - 效果/处理节点（Processor Node）：如增益（GainNode）、滤波器（BiquadFilterNode）、延迟（DelayNode）等
- 输出节点（Destination Node）：通常是用户的扬声器（context.destination）
这些节点通过 connect() 方法连接，形成音频信号流。
立即学习“Java免费学习笔记（深入）”；
加载并播放音频文件
使用 fetch + decodeAudioData 可以加载外部音频并精确控制播放：
注意：现代浏览器要求用户交互（如点击）后才能启动音频上下文，避免自动播放干扰。
实时音频处理与可视化
借助 AnalyserNode，可以获取音频的时域或频域数据，常用于制作音频可视化效果：
const analyser = context.createAnalyser(); analyser.fftSize = 2048; const bufferLength = analyser.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); // 将分析器插入到音频节点之间 source.connect(analyser); analyser.connect(context.destination); function draw() { requestAnimationFrame(draw); analyser.getByteTimeDomainData(dataArray); // 获取波形数据 // 使用 Canvas 绘制音频波形 } draw();创建合成音效
使用 OscillatorNode 可生成正弦波、方波等基础音色，适合做简单音效或音乐合成：
function playTone(frequency = 440, duration = 1) { const oscillator = context.createOscillator(); const gainNode = context.createGain(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(frequency, context.currentTime); // 包络控制音量起止，避免咔哒声 gainNode.gain.setValueAtTime(0, context.currentTime); gainNode.gain.linearRampToValueAtTime(0.5, context.currentTime + 0.05); gainNode.gain.linearRampToValueAtTime(0, context.currentTime + duration); oscillator.connect(gainNode); gainNode.connect(context.destination); oscillator.start(); oscillator.stop(context.currentTime + duration); }基本上就这些。Web Audio API 提供了精细的音频控制能力，结合 HTML5 和 Canvas，能实现丰富的交互式声音体验。不复杂但容易忽略的是时序管理和上下文激活问题，确保在用户触发后初始化音频流程。
