地狱音频火焰插件产品系统

本项目面向音视频播放器插件开发场景，复刻GoldWave经典「吹地狱」火焰音频可视化效果，解决市面播放器缺少同款原生火焰动效插件的痛点，可作为第三方JS组件快速集成到各类网页音乐播放器中，丰富音频播放的可视化展示形态。

喷火地狱 (Fire Inferno) 是一款 GoldWave 风格的音频可视化插件。它将 Web Audio API
捕获的频谱数据实时转化为像素级火焰动画：低音鼓点驱动底部腾起巨大火柱，高音旋律则化作细腻的火苗与灰烬粒子。底层基于经典热扩散算法模拟火焰物理特性，配合 6
种独立调色板（经典焰、冰蓝、翠绿、紫焰、日落、极光）和 4 种动态风格（Normal/Inferno/Ember/Storm），可实现数十种视觉效果组合。支持拖放音频文件、麦克风实时输入、全屏沉浸模式，纯
JavaScript + Canvas 2D 实现，无需任何第三方依赖，浏览器即开即用。

技术栈

纯 JavaScript ES6+，浏览器端运行，核心依赖只有三个 Web API：Canvas 2D（火焰像素渲染）、Web Audio API（音频频谱采集）、requestAnimationFrame（60fps
动画循环）。零第三方库，无构建工具，HTML 文件打开即用。同时兼容 Node.js 的 CommonJS require()，通过 UMD 模式自动判断导出方式。

架构

三层结构，各层职责清晰：

演示层（index.html） — 负责音频解码播放、UI 控件、全屏管理、迷你频谱指示器。通过 Web Audio API 的 AnalyserNode 每帧抓取频谱数据，喂给下层插件。

管理层（VisualizerHost） — 插件注册、动态加载、实例生命周期管理。浏览器用动态 注入加载，Node.js 用 require()，对外暴露统一的 register() → create() → destroy() 流程。

插件层（FireInfernoVisualizer） — 火焰引擎核心，不关心音频来源，只接收两个标准 Uint8Array（频谱 +
波形）。内部包含热扩散模拟器、节拍检测器、火星粒子系统、湍流噪声发生器四个子系统，最终通过 Canvas ImageData 像素写入输出画面。

实现亮点

频谱水平扩散。音乐能量天然集中在低频（画面左侧），不做处理右侧火焰一片死黑。通过对频谱做 box blur 将低频能量向右渗透，确保全屏都有火焰起伏。

节拍驱动爆发。独立的 BeatDetector 用 30 帧环形缓冲跟踪低频能量历史，实时检测鼓点重音。触发时火焰强度瞬时提升、火星额外爆发
60%、底部产生径向辉光——让火焰"跟节奏"而不仅仅是"随频谱晃动"。

半分辨率离屏渲染。火焰像素在 50% 分辨率离屏 Canvas 上计算，减少 75% 的像素遍历量，再通过硬件 drawImage 放大到全屏。火星和辉光仍在全分辨率叠加，保证关键细节不糊。

Uint32 直接像素写入。调色板预计算为 256 级 Uint32Array（ABGR 格式），渲染时一次 32 位写入完成一个像素的 RGBA 赋值，比逐字节写入快数倍。

实现难点

双缓冲交换时的底部行保留。热扩散算法每帧交换 heat 和 newHeat 两个缓冲区，但底部两行是音频注入的入口，交换后会被上一帧的冷却数据覆盖。必须显式回拷底部注入数据到新缓冲区。

湍流与模糊的顺序博弈。先模糊后湍流 → 湍流偏移破坏模糊效果。先湍流后模糊 → 模糊抹掉湍流锯齿。最终选择先模糊再湍流，靠半分辨率渲染的天然低通做最终柔化。

粒子数量的平滑控制。火星数量由音频水平、节拍强度、密度参数三者实时决定，范围 0~40。如果简单用 while (不足就创建)
补齐，静音→爆发的瞬间会产生帧率尖刺。通过概率丢弃低频区域的粒子生成请求来平滑突变。

零依赖下的代码组织。860 行单文件手写 IIFE + UMD，依靠注释分隔线保持可读性。随着功能增长，这种组织方式会越来越吃力，但换来了绝对零构建成本的优势。