无需登录 数据私有 本地保存

音乐频谱可视化 - 实时跳动频率柱

20
0
0
0
待启动
柱状图

常见问题与知识点

音频频谱可视化是将声音信号的频率分布以图形方式呈现的技术。通过快速傅里叶变换(FFT),将时域的音频波形转换为频域数据,每个柱状图代表特定频率范围的音量强度。低频(如贝斯、鼓声)显示在左侧,高频(如镲片、人声齿音)显示在右侧。这种可视化广泛应用于音乐播放器、DJ软件、音频编辑工具等场景。

本工具支持三种输入方式:① 演示模式(默认)— 使用算法生成的模拟频谱数据,无需任何硬件或权限,打开即用;② 麦克风输入 — 实时采集环境声音或播放的音乐进行可视化,需要浏览器授予麦克风权限;③ 音频文件上传 — 支持 MP3、WAV、OGG、FLAC 等常见格式,上传后可同时播放音频并显示频谱。三种模式可随时切换。

每个柱状图代表一个频率区间(Frequency Bin)的幅度(音量大小)。柱子的高度越高,说明该频率在当前时刻的能量越强。从左到右对应从低频到高频(通常为 20Hz ~ 20kHz)。低频区(左侧柱子)反映贝斯、底鼓等低音乐器;中频区(中间)对应人声、吉他等;高频区(右侧)反映镲片、合成器高音等。通过观察频谱,可以直观了解音乐的频率分布和节奏变化。

FFT(快速傅里叶变换)大小决定了频率分辨率和时间响应速度。较小的FFT(如256、512)提供更快的时间响应,适合观察快速节奏变化,但频率分辨率较低;较大的FFT(如2048、4096)提供更精细的频率细节,但时间响应稍慢。本工具默认使用2048的FFT大小,在频率精度和响应速度之间取得良好平衡,前端实际使用约128个频率仓进行可视化绘制。

麦克风无法工作通常由以下原因导致:① 浏览器权限未授予 — 请在浏览器弹窗中点击"允许"麦克风访问;② 系统隐私设置 — macOS/Windows 的隐私设置中可能禁用了浏览器访问麦克风;③ HTTPS 要求 — 大多数浏览器要求通过 HTTPS 才能访问麦克风(localhost 除外);④ 设备未连接或被占用 — 检查麦克风是否正确插入,是否被其他应用独占使用。如仍无法解决,可切换到演示模式或上传音频文件。

柱状图模式是传统的横向布局,频率从左到右排列,直观易读;圆形模式将频率沿圆周排列(低频从某角度起始,高频绕回),柱状图从圆心向外辐射,视觉效果更具科技感和空间感,适合作为背景装饰或艺术展示;镜像反射模式在柱状图基础上增加了对称的下方反射效果,模拟水面倒影,视觉层次更丰富。三种模式可一键切换,满足不同场景需求。

频谱可视化广泛应用于:🎵 音乐播放器(如网易云音乐、Spotify 的频谱效果);🎛️ 音频编辑与混音(观察各频段均衡情况);🎤 直播与播客(实时监控音频状态);🎮 游戏音效设计(分析音效频率成分);🏠 智能家居(语音助手的声音反馈可视化);🎨 数字艺术装置(音乐与视觉艺术的结合)。本工具亦可作为开发者的参考实现,学习 Web Audio API 的使用。

点击控制面板中的相机图标按钮即可将当前频谱画面保存为 PNG 图片并自动下载。截图包含当前的颜色主题和可视化模式,分辨率为实际Canvas像素尺寸(支持高DPI视网膜屏幕)。您也可以使用系统的截图工具(如 Windows 的 Win+Shift+S 或 macOS 的 Cmd+Shift+4)进行区域截图。

完全支持移动端使用!本工具采用响应式设计,在手机和平板设备上会自动调整Canvas尺寸和控件布局。移动端同样支持麦克风输入(需用户授权)和音频文件上传。演示模式在移动端表现尤为流畅,无需任何权限即可体验完整的频谱可视化效果。建议在移动端使用横屏模式获得更佳的视觉体验。

本工具提供5种精心设计的颜色主题:🌈 彩虹(全色谱渐变,经典频谱色);🌊 海洋(蓝青色系,冷静科技感);🌅 日落(橙粉暖色调,温暖活力);💚 极光(绿蓝渐变,清新自然);💜 霓虹(粉紫霓虹风,赛博朋克感)。每个主题在Canvas中使用线性渐变实现,柱状图从底部到顶部颜色平滑过渡,顶部带有发光效果。主题切换即时生效,无需重启。