Canvas音频可视化粒子效果本质是将声音实时转化为视觉动作，必须依赖AudioContext初始化和AnalyserNode分析音频数据，通过getByteFrequencyData获取频域数据驱动粒子行为，否则仅为固定节奏动画。
Canvas 实现音频可视化粒子效果，本质是把声音“翻译”成视觉动作——但这个翻译过程不能跳过 AudioContext 和 AnalyserNode。纯 HTML 或只靠 CSS 动画做不到真正响应音乐，粒子必须基于实时音频数据驱动，否则只是节奏幻觉。
AudioContext 是不可绕过的起点
浏览器里所有音频分析都从 AudioContext 开始。它不是可选插件，而是 Web Audio API 的中枢：没有它，AnalyserNode 就没数据源，粒子就只能按固定周期瞎晃。
- 必须用
new (window.AudioContext || window.webkitAudioContext)()初始化，注意兼容旧版 Safari - 移动端首次播放前需用户手势触发
audioContext.resume()，否则始终 suspended，getByteFrequencyData()返回全 0 - 若页面加载后长时间未交互，部分浏览器会自动 suspend，建议在播放/麦克风启用时主动 resume
AnalyserNode 配置决定粒子“听感”精度
它才是把声音拆解成数字的关键节点。配置不对，粒子反应就会迟钝、失真或卡顿。
Blender Geometry Nodes Script Generator
下载
生成Blender Python (bpy)脚本，该脚本使用node_groups API和GeometryNodeTree接口程序化地创建几何节点修改器树，用于参数化3D资产生成。
-
fftSize必须是 2 的幂（如 256、512、1024、2048），值越大频点越密，低频和高频细节越丰富，但计算压力也上升 -
smoothingTimeConstant推荐设为 0.7–0.85，让频率变化更平滑，避免粒子突跳；设为 0 则响应最灵敏但易抖动 - 连接链必须完整：音频源 → analyser → destination（即使不输出声音，也要连上 destination，否则部分浏览器不触发分析）
Canvas 渲染粒子要兼顾实时性与表现力
拿到 Uint8Array 数据后，怎么映射到粒子行为，直接决定视觉质量。
- 用
getByteFrequencyData()获取频域数据（适合做频谱柱、旋转环、径向粒子），或getByteTimeDomainData()获取波形数据（适合做上下跳动、左右拉伸类粒子） - 粒子数量建议控制在 100–300 个之间，每个粒子根据对应频段数值动态调整 size / opacity / y 位移 / rotation，避免遍历全部 1024 个频点做粒子
- 绘制用
requestAnimationFrame驱动，每帧先清空 canvas（ctx.clearRect()），再批量绘制；避免用fillRect逐个画，改用beginPath + moveTo + lineTo + stroke或arc提升性能
常见失效原因和快速排查点
粒子不动？跳得奇怪？大概率卡在这几个环节：
- 控制台没报错，但粒子静止 → 检查 AudioContext 是否 resume，analyser 是否已接入 audio graph
- 粒子有动作但完全不随音乐 → 查
analyser.getByteFrequencyData(dataArray)后打印 dataArray[0]，若恒为 0，说明音频流没进 analyser - 移动端白屏或无声 → 确保 audio 标签加了
autoplay muted，且首次播放由 button click 触发 - 高频闪烁或卡顿 → 减小 fftSize（试 512）、降低粒子数、关闭不必要的 canvas shadow 或抗锯齿
