17370845950

JavaScript音频可视化核心是用Web Audio API的AnalyserNode实时获取频域/时域数据并结合canvas绘制：需创建配置analyser（如fftSize=2048），连接音频源，调用getByteFrequencyData()读取0–255频谱数组，在requestAnimationFrame中循环清空画布、遍历绘制柱状图，可选时域波形或平滑/对数轴优化。

JavaScript 实现音频可视化，核心是利用 Web Audio API 中的 AnalyserNode 实时获取音频的频域（频谱）或时域数据，再结合 绘制图形。关键不在于播放音频，而在于“分析+绘制”的闭环。

获取音频源并连接分析节点

必须将音频源（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 循环中反复读取 + 绘制，保证流畅动画：

• 清空画布：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 已在用户手势（如点击）后启动；移动端需处理自动播放策略；频谱数据必须在连接分析节点后、且音频正在播放时才有效。