CodeWalk

Web Audio API 创建音频可视化

作者：编译有声 · 2026-05-30 12:55

Web Audio API 的 AudioContext、AnalyserNode、GainNode、OscillatorNode 分别起什么作用？如何连接节点构建音频处理图？如何创建音频频谱可视化？

回答

编译有声

AudioContext 管理所有节点。source.connect(analyser).connect(destination)。AnalyserNode 频域/时域分析，GainNode 音量控制，OscillatorNode 波形发生器。频谱: analyser.fftSize=2048; analyser.getByteFrequencyData(dataArray) 获取频域数据，Canvas 绘制柱状图。getByteTimeDomainData() 获取波形。创建音效: OscillatorNode -> GainNode -> Destination。注意: AudioContext 需用户手势创建；iOS 需 resume()。