再谈 Web 音频可视化
内容提要
本文讨论了音频可视化中的常见问题和解决方法，包括获取音频数据、性能优化和傅立叶变换的影响。同时提供了实现音频可视化的简单方法。
延伸解读
fftSize 的权衡：性能与分辨率
fftSize 决定快速傅立叶变换的数据量，值越大频域数据越精确，但延迟越高且计算负担加重。官方允许范围为 2^5 到 2^15。文章通过实验指出，过小的 fftSize（如 32）会导致频域点位稀疏，无法覆盖人耳敏感的中低频（约 40Hz 到 7000Hz），难以支撑合理的可视化图形；而过大则影响流畅度。作者建议将 fftSize 设为 8192，以在延迟、分辨率和性能之间取得平衡。
为何需要对数频域分布
Analyzer 默认输出线性分布的频域数据，导致低频区域显示过高、高频区域几乎无数据。但人耳对频率的感知近似对数：能轻松分辨 100Hz 与 200Hz，却难分辨 9500Hz 与 9600Hz。文章通过数学计算说明，对数分布下 10、100、1000、10000 之间的距离基本一致（约 2.3），更符合听觉特性。将 X 轴改为对数映射后，频谱显示更自然，但右侧无数据的问题需另行处理。
采样率导致的高频空白与裁切
频域数据覆盖 0 到采样率一半的频率。例如采样率 48000Hz 时，最后一个频点对应 24000Hz，而人耳听不到 20000Hz 以上的声音，现代音乐制作也常裁切该部分。因此频谱右侧会出现无数据的空白。文章建议根据采样率和 fftSize 计算每个频点代表的频率，裁切掉 20000Hz 以上及 20Hz 以下的部分，使可视化图形更紧凑有效。
录音实时可视化的实现要点
除了播放音频，录音时也可实时可视化。核心是使用 navigator.mediaDevices.getUserMedia 获取音频流，然后通过 audioContext.createMediaStreamSource(stream) 创建源节点，连接到 Analyzer。之后以固定间隔（如 24fps）调用与播放场景相同的 handleData 方法获取时域和频域数据。需注意处理用户拒绝授权或浏览器不支持 getUserMedia 的情况，并做好错误提示。
Q&A
如何获取音频数据进行可视化？
可以通过创建音频上下文和分析器，使用MediaElementSource连接音频标签，然后获取时域和频域数据。
fftSize的设置对音频可视化有什么影响？
fftSize影响频域数据的精确度和性能，较大的fftSize提供更精确的数据，但可能导致性能下降。
如何优化音频可视化的性能？
可以使用Canvas进行渲染优化，减少延迟并提高可视化流畅度。
线性分布和对数分布在频域数据中有什么区别？
线性分布在频率间隔上差距不均，而对数分布更符合人耳对声音的感知，能更好地展示频率变化。
如何在录音时实现音频的实时可视化？
可以使用getUserMedia获取音频流，并将其连接到分析器，定期获取数据进行可视化。
采样率对傅立叶变换有什么影响？
采样率决定了频率样本的数量，过高的频率可能会被裁切，影响可视化效果。
