AnalyserNode 实现频谱可视化需三步：创建配置节点（fftSize=2048、smoothingTimeConstant=0.8）、正确接入音频图（源→analyser→destination）、用 requestAnimationFrame 定时读取 getByteFrequencyData 并 canvas 绘制，辅以对数分组与衰减优化显示。
用 AnalyserNode 做频谱可视化，核心是获取音频频率数据并映射为图形——它不产生声音，只分析；关键在正确连接音频图、配置分析参数、定时读取数据并绘制。
创建并配置 AnalyserNode
从 AudioContext 创建 analyser，设置分辨率和范围：
- 调用
context.createAnalyser()得到节点 - 设置
analyser.fftSize = 2048（值必须是 2 的幂，常用 256–4096） -
analyser.frequencyBinCount是实际可用频点数，等于fftSize / 2 - 可选：设
analyser.smoothingTimeConstant = 0.8让变化更平滑（0–1，越大越缓）
连接音频源到 AnalyserNode
确保音频信号流经 analyser，才能拿到数据：
- 若播放
AudioBufferSourceNode：源 → analyser → destination - 若处理麦克风：
mediaStreamSource→ analyser → destination - 注意：analyser 必须在 audio graph 中，否则
getByteFrequencyData()返回全 0
用 canvas 绘制实时频谱条形图
在动画循环中读取频率数据并画柱状图：
立即学习“前端免费学习笔记（深入）”；
- 创建
Uint8Array缓冲区：const freqData = new Uint8Array(analyser.frequencyBinCount) - 每帧调用
analyser.getByteFrequencyData(freqData)填充数据（值域 0–255） - 遍历
freqData，将每个值映射为高度（如height = freqData[i] * 2），用fillRect或lineTo绘制竖条 - 推荐用
requestAnimationFrame驱动绘制，避免卡顿
优化显示效果的小技巧
让频谱更自然、响应更灵敏：
- 对低频段做对数分组（如每 2 点合并为 1 柱），避免高频过于密集
- 加简单衰减逻辑：记录上一帧高度，新高度 = 当前 * 0.2 + 上一帧 * 0.8，模拟“余晖”感
- 用
gradient或不同色相区分频段（如低频蓝、中频绿、高频红） - 避免直接用原始
freqData—— 它是线性频率分布，人耳感知接近对数，可手动重采样
