什么是音频可视化器？

以波形、频率条形图、圆形频谱或滚动声谱图的形式实时查看你的音频。每种显示模式都会随着音乐播放而变化。

可视化器从文件或麦克风获取音频,通过 Web Audio 的 AnalyserNode 解析,在画布上以 60 fps 绘制频率或时域数据。可在波形、频率柱状图、镜像柱状图、环形频谱或滚动声谱图之间切换;画面比例可设为宽屏、方形或竖屏,适配任意平台;背景颜色可选预设或自定义;颜色方案在橙色、霓虹、海洋、单色、彩虹之间选择;调节灵敏度与柱条数量;保存单帧为 PNG;或点击视频按钮,导出带音轨的 WebM 短片。

使用方法

1. 上传音频文件或使用麦克风输入
2. 选择可视化样式:波形、频率柱状图、镜像柱状图、环形频谱或滚动声谱图
3. 播放音频，观看可视化效果实时响应

何时使用

• 把歌曲最响亮的瞬间截图,做成单曲封面。
• 录制一段同步可视化的 WebM 短片,方便分享到社交媒体或上传 YouTube。
• 给学声音设计的学生演示:不同 EQ 调整如何改变曲目的频谱形状。

结果

一位主播在音乐直播中添加实时音频可视化效果，展示随节拍跳动的彩色频率条形图。

常见问题

条形和波形的渐变颜色是怎么来的?

每种配色把频率或幅度数值映射到一条色彩曲线。彩虹用 HSL 走遍整个色相,霓虹偏饱和的粉青,海洋全是蓝色调,单色是灰阶,橙色则对齐站点主色。

为什么每次开麦克风都要重新授权?

浏览器会阻止页面访问麦克风,除非你明确允许。同一会话内授权一次通常会一直生效;之前拒绝过的话,需要到浏览器设置里清掉本站的麦克风权限后再刷新。

怎么录下整段可视化效果,而不只是一张图?

点击画布上的视频图标,即可把现场可视化连同音轨一起录制成 WebM。文件模式会从头完整录制整首音频,麦克风模式则录制三十秒短片。旁边的 PNG 按钮只截一帧,适合你只想要一张静态图的时候。

灵敏度滑块到底改了什么?

它在绘制前把振幅整体放大或缩小。值低一些可以让响亮的母带不溢出画面;值高一些则把耳语或干净指弹这类小声源放大到能看清。

为什么播放纯音时只看到几根条?

纯正弦波只有一个基频和少量泛音,绝大多数 FFT 频段都接近零。这就是频谱的正确行为。换成音乐或人声就能看见全频段亮起来。

相关工具