用AnalyserNode实现频谱可视化关键在于信号流经分析节点、正确读取数据并稳定映射到Canvas：需配置fftSize（如2048）和smoothingTimeConstant（如0.8），确保analyser接入音频图并连接destination，用requestAnimationFrame复用Uint8Array读取频域数据，Canvas绘制时按对数分组、分段着色、动态衰减优化视觉效果。

用 AnalyserNode 实现频谱可视化，关键不是“画图”，而是让音频信号流经分析节点、正确读取数据、再稳定映射到 Canvas 上。它本身不发声，只输出 0–255 的频域能量值，必须接入音频图才能拿到真实数据。

配置 AnalyserNode 参数

创建后需显式设置两个核心参数：

• fftSize 必须是 2 的幂（如 256、512、2048），决定频率分辨率；常用 2048，对应 1024 个可用频点（frequencyBinCount = fftSize / 2）
• smoothingTimeConstant 控制变化平滑度，设为 0.7–0.9 可抑制抖动，0.8 是兼顾响应与视觉稳定的常用值

确保音频信号流经 analyser

analyser 必须在音频图中串联，否则 getByteFrequencyData() 返回全 0：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 播放本地音频时：AudioContext.createMediaElementSource(audioEl) → analyser → context.destination
• 使用麦克风时：createMediaStreamSource(stream) → analyser → destination
• 注意：analyser 需同时连接 destination，否则声音会静音

用 requestAnimationFrame 读取并绘制

高频渲染必须绑定屏幕刷新节奏，不能用 setInterval：

立即学习“前端免费学习笔记（深入）”；

• 预先创建 Uint8Array 缓冲区：const freqData = new Uint8Array(analyser.frequencyBinCount)
• 每帧调用 analyser.getByteFrequencyData(freqData)，复用数组避免 GC 压力
• Canvas 绘制时，只 clearRect 频谱区域（如高度 100px），不整屏清空
• 柱宽按 canvas.width / frequencyBinCount 动态计算，高度映射建议加简单衰减（如 height = freqData[i] * 0.8 + lastHeight[i] * 0.2）

优化人耳感知效果

原始线性频点分布不符合听感，可做轻量级调整：

• 对低频段（前 1/3 索引）做指数映射，例如 Math.pow(freqData[i], 1.2)，让底鼓更突出
• 按频段分色：低频用蓝、中频用绿、高频用红，增强可读性
• 避免直接拉伸全部 1024 点到画布宽度——改用对数分组（如每 2–4 点合并为 1 柱），压缩高频密度