Web Audio API 是浏览器中处理音频的现代方案，以 AudioContext 为中枢构建节点式音频图，支持实时分析、合成与可视化；需用户手势触发、注意跨域限制及内存管理。
Web Audio API 是浏览器中处理音频的现代方案，它比 <audio></audio> 标签更灵活、低延迟、可编程性强，适合做实时音频分析、音效合成、可视化等任务。核心在于用节点（AudioNode）构建音频图（Audio Graph），数据在节点间流动，不直接操作原始音频字节，而是通过参数控制信号流。
用 AudioContext 搭建基础音频流程
所有 Web Audio 操作都从 AudioContext 开始，它是音频系统的中枢。需注意：移动端通常需用户手势触发才能启动（如点击按钮后调用 resume()）。
- 创建上下文：
const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - 加载并解码音频：
fetch('sound.mp3').then(r => r.arrayBuffer()).then(audioCtx.decodeAudioData).then(buffer => { /* 创建 AudioBufferSourceNode */ }); - 连接节点链路：例如
source → gainNode → analyser → destination，用.connect()方法串联
实时频谱分析与 FFT 数据获取
AnalyserNode 是实现可视化的关键节点，它不改变音频信号，只提供时域/频域快照。默认输出为 2048 点 FFT 结果（可设 fftSize），数据通过 Uint8Array 或 Float32Array 读取。
- 配置示例：
analyser.fftSize = 2048; const bufferLength = analyser.frequencyBinCount; // = 1024 - 获取频域能量：
const dataArray = new Uint8Array(bufferLength); analyser.getByteFrequencyData(dataArray); - 注意：必须先连接到音频图（哪怕只是
analyser.connect(audioCtx.destination)），否则数据始终为 0
用 Canvas 绘制动态频谱条形图或波形图
结合 requestAnimationFrame 循环读取分析数据，在 <canvas></canvas> 上绘制。常见模式有：
立即学习“Java免费学习笔记（深入）”；
-
频谱图（bar chart）：将
dataArray[i]映射为柱高，横向排列 1024 根柱子，用fillRect或lineTo渲染 -
波形图（time-domain）：用
analyser.getByteTimeDomainData()获取当前波形采样点（通常 256 点），连成折线 - 优化建议：避免每帧重绘整个 canvas；可用
clearRect局部擦除，或用双缓冲减少闪烁
常见陷阱与实用技巧
实际开发中容易卡在几个细节上：
-
自动暂停问题：Safari 和部分安卓浏览器会在页面切后台时挂起
AudioContext，恢复时需手动调用audioCtx.resume() -
跨域音频限制：从其他域名加载的音频需服务端设置
Access-Control-Allow-Origin，否则decodeAudioData报错 -
内存与性能：频繁创建
AudioBufferSourceNode不销毁会泄漏；播放完毕后应调用stop()并断开连接 -
兼容性兜底：老版 Safari 需用
webkitAudioContext，iOS 15+ 才支持createMediaStreamDestination等高级特性
