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許可條款發布。