🎶 Spectro

Spectro 是一个用于网页的实时音频频谱生成器。它可以可视化来自你的麦克风或者设备上音频文件的声音。

💻 使用方法

前往 这里 开始使用 Spectro。

要开始生成频谱图，你可以：

• 点击 🎤 从麦克风录制 按钮，开始从麦克风生成频谱图。

  如果你想记录设备的音频输出，你可以在 Windows 上 启用“立体声混音” 或在 macOS 上 使用 BlackHole，然后设置此设备为浏览器的默认输入设备。

• 点击 🎵 播放音频文件 按钮，开始从设备上的音频文件生成频谱图，并播放所选音频文件。

  支持你浏览器的任何音频格式都可以播放。

频谱图从 右向左 生成，最近的音频出现在右侧，最旧的在左侧。

还有 ⚙ 设置 可用以控制频谱图的显示：

• 🔊 敏感度 控制频谱图对音频的敏感程度。改变它与调整音频音量具有相同的效果。
• 🌗 对比度 应用对数缩放以增加图像的对比度。根据分析的音频，改变它可能有助于产生更好的图像。
• 🔍 缩放 控制沿时间轴频谱图的缩放级别。
• 📈 最小和最大频率 控制要在频谱图中显示的频率范围。较低的频率位于频谱图底部，较高的频率位于顶部。
• 🎹 频率刻度 控制应用到频谱图频率轴的缩放方式。"线性"表示所有频率均匀分布，而 "梅尔" 给予较低频率更多的权重，呈现更自然的外观。
• 🌈 颜色 控制用来显示频谱图的颜色方案。

点击 ⏹ 停止 按钮可以停止生成频谱图。如果正在播放音频文件，当曲目结束时，频谱图会自动停止。

❓ 常见问题解答

什么是频谱图？

频谱图是从声音生成的图像。它随着时间展示声音中的频率，横轴代表时间，纵轴代表频率，颜色代表频率的响度。

例如，如果你给自己的吹口哨生成频谱图，你会看到一条与口哨音高相符的明亮线条。

Spectro 支持哪些浏览器？

最新版本的 Chrome、Firefox 和 Safari 都与 Spectro 兼容。其他基于 Chromium 的浏览器，如新版本的 Microsoft Edge 也应该能正常工作。

Spectro 如何运作？

这篇博客文章详细描述了它的运行机制！简而言之：

• 将音频输入分割为每帧 4096 个样本，并每隔 1024 个样本重叠。我选择 4096 作为窗口大小，因为它在时间和频率分辨率之间达到了最佳平衡——最终可能会使其可配置。
• 这些重叠的帧随后使用 七项布莱克曼-哈里斯 函数进行窗化，我发现这能提供最清晰的视觉效果。
• 然后这些窗口在一个专用的 Web 工作线上通过快速傅里叶变换（使用 jsfft）处理，并取每个频率段的范数作为频谱图的基础。
• 这些原始的频谱图数据被插入一个容量等于频谱图像宽度的循环队列中。
• 接着，使用 WebGL 将原始的频谱图数据渲染到屏幕上，利用着色器快速地在 GPU 上直接完成所有缩放、色彩化和其他图像调整。每一帧仅上传新的原始频谱图数据至 GPU 来提高性能，而不是完整上传。
• 设置面板使用 React 和 Material-UI 构建（这也是大部分打包大小的原因 😞）。

👩‍💻 开发

安装依赖：

npm install

启动 webpack-dev-server：

npm start

构建生产捆绑包：

npm run build

执行 TypeScript 类型检查：

npm run type-check

📘 许可证

Spectro 遵循 MIT 许可证的条款发布。