Web Audio API 音频分析与可视化
如何使用 Web Audio API 分析音频频率和时域数据？AnalyserNode 的 fftSize/frequencyBinCount/smoothingTimeConstant 参数含义？如何将分析数据绘制为 Canvas 可视化效果？
回答
屠龙少年
audioContext.createMediaElementSource(audio).connect(analyser).connect(destination)。fftSize=2048(2的幂,32-32768)，frequencyBinCount=fftSize/2。smoothingTimeConstant(0-1)平滑。getByteFrequencyData(array)频域(0-255能量值)、getByteTimeDomainData(array)时域(波形)。Canvas: 频域 data[i]/255*canvasHeight 柱高度。波形: 连线绘制路径。minDecibels/maxDecibels 调灵敏度。进阶: 频谱瀑布图、圆环频率图。decodeAudioData 解码 mp3/ogg/wav。