音频可视化工具使用指南
基本使用方法
- 点击"开始拾音"按钮
- 在浏览器弹窗中允许访问麦克风
- 对着麦克风说话、唱歌或播放音乐
- 观察实时的动态图形变化
四种可视化模式
频谱柱
将音频频率分布以柱状图形式展示，低频在左、高频在右，柱高反映该频段的能量大小。适合观察音乐的低音/高音分布。
波形
以示波器方式展示声音的时域波形，上下对称的双层发光线条，能直观看到声音的振幅和频率变化。
圆形
将频谱以 360 度环形展开，中心圆随音量脉动，外围条状随频率跳动，视觉效果最为华丽。
粒子
150 个粒子在画面中流动，每个粒子对应一个频率段，声音越大粒子运动越快、体积越大，相近粒子间还会自动连线。
控制选项
- 灵敏度：调节音频信号的放大倍数（0.3~3.0），值越大图形变化越剧烈
- 平滑度：调节频谱数据的平滑系数（0~0.95），值越大过渡越柔和
- 配色：霓虹、火焰、海洋、森林、紫罗兰五种配色方案可切换
快捷键
空格：开始/停止拾音1 / 2 / 3 / 4：切换 频谱柱 / 波形 / 圆形 / 粒子 模式
技术原理
Web Audio API
本工具基于浏览器的 Web Audio API 实现。通过 getUserMedia 获取麦克风的音频流，使用 AnalyserNode 对音频数据进行实时 FFT（快速傅里叶变换）分析，将时域信号转换为频域数据，再由 Canvas 2D 绘制成可视化图形。
频率分析
- FFT 大小：2048，对应 1024 个频率 bin
- 采样率：通常为 44100Hz 或 48000Hz
- 频率分辨率：采样率 / FFT大小，约 21~23Hz per bin
- 人耳可听范围约 20Hz~20000Hz
使用建议
- 建议使用 Chrome 或 Edge 浏览器获得最佳效果
- 使用耳机或外放播放音乐可避免麦克风回授
- 环境噪音较小时可视化效果更纯净
- 全屏模式下沉浸感更强