spectro

？光谱

Spectro是网络的实时音频谱图生成器。它可以从麦克风或设备上的音频文件中可视化声音。

用法

前往这里开始使用Spectro。

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

• 点击？从MIC按钮记录从麦克风开始生成光谱图。

  如果要从设备的音频输出中录制音频，则可以在Windows上启用“立体声混合”或在MacOS上使用Blackhole，然后将此设备设置为浏览器的默认输入设备。

• 点击？播放音频文件按钮以开始从设备上的音频文件生成频谱图。这也将播放选定的音频文件。

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

频谱图从右到左生成，最新的音频出现在右侧，左侧最大。

还有⚙选项可以控制频谱图的外观：

• ？灵敏度控制频谱图对音频的敏感程度。更改它的效果与更改音频的音量相同。
• ？对比度将对数缩放尺度应用于频谱图，以增加对比度的对比度。根据所分析的音频，更改它可以帮助产生更好的图像。
• ？缩放控制沿时间轴显示频谱图中的变焦。
• ？最小。和最大。频率控制在频谱图上显示的频率范围。较低的频率出现在频谱图的底部，顶部出现较高的频率。
• ？频率尺度控制尺度以应用于频谱图的频率轴。 “线性”是指所有频率均匀地表示，而“ MEL”通过对较低频率的重量更大的重量产生更自然的外观。
• ？颜色控制着色方案，以显示频谱图。

您可以单击“停止”按钮停止生成频谱图。如果播放音频文件，则频谱图将在轨道的末端自动停止。

❓常见问题解答

什么是频谱图？

频谱图是由声音产生的图像。它可视化声音中存在的频率，随着时间的流逝，沿水平轴，沿垂直轴的频率表示的时间以及频率的响度。

例如，如果您要产生吹口哨的频谱图，您会在哨子的音调上看到一条明亮的线条。

Spectro可以使用哪些浏览器？

Chrome，Firefox和Safari的最新版本都与Spectro一起使用。任何其他基于铬的浏览器（例如Microsoft Edge的新版本）也应该有效。

Spectro如何工作？

这是一篇博客文章，描述了这一切！快速概述：

• 音频输入分为4096个样本的帧，每1024个样本重叠。我选择了4096作为我的窗口大小，因为它似乎是时间和频率分辨率之间的最佳折衷 - 最终我可能会使其可配置。
• 然后，这些重叠的框架将使用七届Blackman-Harris功能窗口，我决定使用它，因为它似乎给出了最大的视觉清晰度。
• 然后，窗口通过专用的Web Worker中的快速傅立叶变换（使用JSFFT）运行，每个频率箱的标准都作为频谱图的基础。
• 然后将此原始频谱数据插入到圆形队列中，该圆形队列的容量等于频谱图图像的宽度。
• 然后，使用WebGL将原始频谱数据渲染到屏幕上，使用着色器快速直接在GPU上执行所有缩放，色彩和其他图像调整。仅将新的原始频谱数据数据上传到GPU每个帧以提高性能，而不是进行完整上传。
• 设置面板使用React和材料UI（哪些捆绑尺寸的大部分？）。

？发展

安装依赖项：

 npm install

启动WebPack-dev-server：

 npm start

建立生产捆绑包：

 npm run build

执行打字稿类型检查：

 npm run type-check

执照

Spectro按照MIT许可条款发布。