spectro

? Spektum

Spectro ist ein Echtzeit-Audiospektrogrammgenerator für das Web. Es kann Sound von Ihrem Mikrofon- oder Audiodateien auf Ihrem Gerät visualisieren.

Verwendung

Gehen Sie hierher, um mit Specro zu beginnen.

Um ein Spektrogramm zu generieren, können Sie entweder:

• Klicken Sie auf das ? Notieren Sie von der Mikrofon -Taste, um ein Spektrogramm aus Ihrem Mikrofon zu generieren.

  Wenn Sie Audio aus der Audioausgabe Ihres Geräts aufnehmen möchten, können Sie 'Stereo -Mix' unter Windows aktivieren oder Blackhole auf MacOS verwenden und dieses Gerät dann als Standardeingangsgerät Ihres Browsers einstellen.

• Klicken Sie auf das ? Spielen Sie die Schaltfläche Audio -Datei , um ein Spektrogramm aus einer Audiodatei auf Ihrem Gerät zu generieren. Dadurch wird auch die ausgewählte Audio -Datei abgespielt.

  Jedes Audio -Format, das von Ihrem Browser unterstützt wird, kann gespielt werden.

Das Spektrogramm erzeugt von rechts nach links , wobei das neueste Audio rechts und älteste links erscheint.

Es stehen auch Optionen zur Verfügung, um das Erscheinungsbild des Spektrogramms zu steuern:

• ? Die Empfindlichkeit steuert, wie empfindlich das Spektrogramm für den Audio ist. Das Ändern hat den gleichen Effekt wie das Ändern des Audiovolumens.
• ? Der Kontrast wendet die logarithmische Skalierung auf das Spektrogramm an, um dem Bild Kontrast hinzuzufügen. Wenn Sie es ändern, kann dies dazu beitragen, ein besseres Bild zu erzeugen, abhängig vom analysierten Audio.
• ? Zoom steuert, wie zoomt im Spektrogramm entlang der Zeitachse erscheint.
• ? Min. und max. Frequenz steuern Sie den Bereich der Frequenzen, die im Spektrogramm angezeigt werden sollen. Am unteren Rand des Spektrogramms treten niedrigere Frequenzen auf und höhere Frequenzen oben.
• ? Die Frequenzskala steuert die Skalierung, um auf die Frequenzachse des Spektrogramms anzuwenden. "Linear" bedeutet, dass alle Frequenzen gleichmäßig dargestellt werden, während "Mel" ein natürlicheres Erscheinungsbild erzielt, indem niedrigere Frequenzen mehr Gewicht verleihen.
• ? Farb steuert das Farbschema, mit dem das Spektrogramm angezeigt wird.

Sie können auf die Schaltfläche "Stopp" klicken, um das Erzeugen des Spektrogramms zu beenden. Wenn Sie eine Audiodatei abspielen, stoppt das Spektrogramm automatisch am Ende der Strecke.

❓ FAQ

Was ist ein Spektrogramm?

Ein Spektrogramm ist ein Bild, das aus Klang erzeugt wird. Es visualisiert die Frequenzen im Klang im Laufe der Zeit, wobei die Zeit entlang der horizontalen Achse, die Frequenz entlang der vertikalen Achse und die Lautstärke der Frequenz durch Farbe dargestellt wird.

Wenn Sie beispielsweise ein Spektrogramm von sich selbst pfeifen würden, sehen Sie eine helle Linie auf der Steigung des Pfeifes.

Mit welchen Browsern arbeitet Spectro?

Die neuesten Versionen von Chrome, Firefox und Safari arbeiten alle mit Spectro. Jeder andere Chrombasis -Browser wie die neue Version von Microsoft Edge sollte ebenfalls funktionieren.

Wie funktioniert Spectro?

Hier ist ein Blog -Beitrag, der alles beschreibt! Ein kurzer Überblick:

• Der Audioeingang wird in Frames von 4096 Proben unterteilt, die alle 1024 Proben überlappt werden. Ich habe 4096 als meine Fenstergröße ausgewählt, da es den besten Kompromiss zwischen Zeit- und Frequenzauflösung zu sein schien-irgendwann könnte ich es konfigurierbar machen.
• Diese überlappenden Frames werden dann mit einer siebenfristigen Blackman-Harris-Funktion mit Fenster geführt, über die ich mich entschieden habe, da sie die visuellste Klarheit zu geben schien.
• Die Fenster werden dann durch eine schnelle Fourier -Transformation (mit JSFFT) in einem speziellen Webarbeiter ausgeführt, und die Norm jedes Frequenzbehälters wird als Grundlage des Spektrogramms angenommen.
• Diese Rohspektrogrammdaten werden dann in eine kreisförmige Warteschlange eingefügt, die die Kapazität der Breite des Spektrogrammbildes aufweist.
• Die RAW -Spektrogrammdaten werden dann mit WebGL auf den Bildschirm gerendert, wobei ein Shader schnell alle Skalierungs-, Kolourisierungs- und anderen Bildanpassungen direkt auf der GPU durchführt. Es werden nur neue RAW -Spektrogrammdaten in die GPU pro Rahmen hochgeladen, um die Leistung zu verbessern, anstatt einen vollständigen Upload durchzuführen.
• Das Einstellungsfeld verwendet React und Material-UI (welches die meisten Bündelgröße ausmachen?).

?Entwicklung

Abhängigkeiten installieren:

 npm install

Starten Sie WebPack-dev-Server:

 npm start

Bauen Sie ein Produktionsbündel:

 npm run build

Führen Sie die Überprüfung von Typscript -Typen durch:

 npm run type-check

Lizenz

Spectro wird unter den Bedingungen der MIT -Lizenz veröffentlicht.