JavaScript音频可视化核心是用Web Audio API的AnalyserNode实时获取频域/时域数据并结合canvas绘制：需创建配置analyser（如fftSize=2048），连接音频源，调用getByteFrequencyData()读取0–255频谱数组，在requestAnimationFrame中循环清空画布、遍历绘制柱状图，可选时域波形或平滑/对数轴优化。
JavaScript 实现音频可视化，核心是利用 Web Audio API 中的 AnalyserNode 实时获取音频的频域（频谱）或时域数据，再结合 <canvas> 绘制图形。关键不在于播放音频，而在于“分析+绘制”的闭环。
获取音频源并连接分析节点
必须将音频源（AudioBufferSourceNode、MediaElementAudioSourceNode 等）接入 AnalyserNode，才能提取数据：
- 创建分析节点：
const analyser = audioContext.createAnalyser(); - 配置精度（影响频谱分辨率）：
analyser.fftSize = 2048;（值必须是 2 的幂，常用 256–4096） - 连接链路示例：
source.connect(analyser); analyser.connect(audioContext.destination); - 注意：
analyser不改变音频信号，只“旁路监听”频谱信息
读取频谱数据（频率域）
调用 analyser.getByteFrequencyData() 获取归一化的频谱幅度数组（0–255），每个索引对应一个频段：
- 数组长度 =
analyser.frequencyBinCount（等于fftSize / 2，如 fftSize=2048 → 1024 个频点） - 低索引对应低频（如 0–10 ≈ 0–100Hz），高索引对应高频（如 1000–1023 ≈ 10–22kHz）
- 典型用法：
const freqData = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(freqData); - 可直接将
freqData[i]映射为柱状图高度、颜色亮度等视觉参数
用 canvas 实时绘制频谱图
在 requestAnimationFrame 循环中反复读取 + 绘制，保证流畅动画：
立即学习“Java免费学习笔记（深入）”；
- 清空画布：
ctx.clearRect(0, 0, canvas.width, canvas.height); - 遍历
freqData，对每个频点画矩形或线段：const barHeight = freqData[i] * 2;（放大系数按需调整） - 优化建议：使用
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight)绘制频谱柱状图 - 进阶可叠加平滑（移动平均）、对数频率轴（人耳感知更均匀）、色彩映射（如冷色→低频，暖色→高频）
补充：时域波形数据（可选）
若需绘制原始波形（如声波起伏线），用 analyser.getByteTimeDomainData()：
- 返回长度为
analyser.fftSize的数组，值范围 0–255，代表当前时刻的采样点幅度 - 适合画单条波动曲线，但细节不如频谱丰富
- 注意：它反映的是“瞬时振幅包络”，不是原始 PCM 数据（精度已压缩）
不复杂但容易忽略：确保 audioContext 已在用户手势（如点击）后启动；移动端需处理自动播放策略；频谱数据必须在连接分析节点后、且音频正在播放时才有效。
