spectroダウンロード - spectroソースコードのダウンロード

ダウンロード

？スペクトロ

Spectroは、Web用のリアルタイムオーディオスペクトログラムジェネレーターです。デバイス上のマイクまたはオーディオファイルからの音を視覚化できます。

Spectroのスクリーンショット

ここでSpectroの使用を開始します。

スペクトログラムの生成を開始するには、次のいずれかができます。

クリックしますか？マイクボタンから記録して、マイクからスペクトログラムの生成を開始します。
デバイスのオーディオ出力からオーディオを録画する場合は、Windowsで「ステレオミックス」を有効にするか、MacOSでブラックホールを使用してから、このデバイスをブラウザのデフォルト入力デバイスとして設定できます。
クリックしますか？オーディオファイルボタンを再生して、デバイス上のオーディオファイルからスペクトログラムの生成を開始します。これにより、選択したオーディオファイルも再生されます。
ブラウザでサポートされているオーディオ形式はすべて再生できます。

スペクトログラムは右から左に生成され、最新のオーディオが右側に表示され、左で最も古いものが表示されます。

また、スペクトログラムの外観を制御するために利用可能なオプションもあります。

？感度は、オーディオに対するスペクトログラムの感度を制御します。変更すると、オーディオのボリュームを変更することと同じ効果があります。
？ Contrastは、スペクトログラムに対数スケーリングを適用して、画像にコントラストを追加します。それを変更すると、分析中のオーディオに応じてより良い画像を作成することができます。
？ズームは、スペクトログラムのズームが時間軸に沿って表示される方法を制御します。
？分とマックス。周波数制御スペクトログラムに表示する周波数の範囲を制御します。スペクトログラムの下部に低い周波数が表示され、上部に高い周波数が表示されます。
？周波数スケールは、スケーリングを制御して、スペクトログラムの周波数軸に適用されます。「線形」とは、すべての周波数が均等に表されることを意味しますが、「Mel」はより低い周波数により多くの重量を与えることにより、より自然な外観を与えます。
？カラーは、スペクトログラムを表示する配色を制御します。

[停止]ボタンをクリックして、スペクトログラムの生成を停止できます。オーディオファイルを再生すると、スペクトログラムはトラックの最後に自動的に停止します。

スペクトログラムは、音から生成される画像です。時間の経過とともに存在する周波数を視覚化し、水平軸に沿った時間、垂直軸に沿った周波数、および色による周波数のラウドネスを視覚化します。

たとえば、あなたが自分自身のホイッスルのスペクトログラムを生成する場合、ホイッスルのピッチに明るい線が見えます。

Chrome、Firefox、Safariの最新バージョンはすべてSpectroで動作します。 Microsoft Edgeの新しいバージョンのような他のChromiumベースのブラウザも機能するはずです。

これがすべてを説明するブログ投稿です！簡単な概要：

オーディオ入力は4096サンプルのフレームに分割され、1024個のサンプルごとにオーバーラップされます。時間と周波数の解像度の間の最高のトレードオフであると思われるウィンドウサイズとして4096を選択しました。最終的には構成可能にするかもしれません。
これらの重複フレームは、7期のブラックマンハリス関数を使用してウィンドウにされます。
Windowsは、専用のWebワーカーで高速フーリエ変換（JSFFTを使用）を通過し、各周波数ビンの標準がスペクトログラムの基礎として使用されます。
次に、この生のスペクトログラムデータは、スペクトログラム画像の幅に等しい容量を持つ円形キューに挿入されます。
生のスペクトログラムデータは、Shaderを使用してWebGLを使用して画面にレンダリングされ、GPUですべてのスケーリング、色彩、その他の画像調整を直接実行します。完全なアップロードを行うのではなく、パフォーマンスを改善するために、新しい生のスペクトログラムデータのみが各フレームにアップロードされます。
設定パネルは、ReactとMaterial-UIを使用します（これはほとんどのバンドルサイズを占めていますか？）。