Was ist Audio-Visualisierer?

Sehen Sie Ihr Audio in Echtzeit als Wellenform, Frequenzbalken, kreisfoermiges Spektrum oder scrollendes Spektrogramm. Jede Darstellung reagiert auf die Musik waehrend der Wiedergabe.

Der Visualizer holt Audio aus einer Datei oder dem Mikrofon, jagt es durch einen Web-Audio-AnalyserNode und zeichnet Frequenz- oder Zeitbereichsdaten mit 60 fps auf ein Canvas. Wähle Wellenform, Frequenzbalken, gespiegelte Balken, Kreisspektrum oder ein scrollendes Spektrogramm; stelle die Fläche auf Breitbild, Quadrat oder Hochformat für jede Plattform; setze eine voreingestellte oder eigene Hintergrundfarbe; wechsle das Farbschema zwischen Orange, Neon, Ocean, Monochrom und Regenbogen; passe Empfindlichkeit und Balkenzahl an; speichere ein Standbild als PNG; oder tippe auf den Video-Button, um einen WebM-Clip mit fertig eingebettetem Audio zu exportieren.

Anleitung

  1. Laden Sie eine Audiodatei hoch oder verwenden Sie den Mikrofoneingang
  2. Wähle einen Visualisierungsstil — Wellenform, Frequenzbalken, gespiegelte Balken, Kreisspektrum oder scrollendes Spektrogramm
  3. Spielen Sie die Audiodatei ab und beobachten Sie die Visualisierung in Echtzeit

Wann verwenden

  • Cover-Art für eine Single erstellen, indem das Balkenspektrum im lautesten Moment per Screenshot festgehalten wird.
  • Einen teilbaren WebM-Clip deines Tracks mit synchronisiertem Visualizer für Social-Posts oder YouTube-Uploads aufnehmen.
  • Sound-Design-Studierenden zeigen, wie verschiedene EQ-Eingriffe die Spektralform eines Tracks verändern.

Ergebnis

Ein Streamer fuegt seinem Musikstream einen Live-Audio-Visualizer hinzu, der bunte Frequenzbalken zeigt, die im Takt der Musik pulsieren.

Häufige Fragen

Wie kommen die Farbverläufe an Balken und Welle zustande?
Jedes Schema bildet Frequenz- oder Amplitudenwerte auf eine Farbrampe ab. Regenbogen läuft durch das gesamte HSL, Neon trifft auf gesättigtes Pink und Cyan, Ozean bleibt im Blau, Monochrom ist Graustufen und Orange passt zur Site-Palette.
Warum fragt der Browser jedes Mal nach Mikrofonzugriff?
Der Browser sperrt das Mikrofon, bis du ausdrücklich zustimmst. Wenn du es einmal pro Session erlaubst, bleibt das normalerweise bestehen; bei früherer Ablehnung musst du die Mikrofonberechtigung der Seite in den Browsereinstellungen löschen und neu laden.
Wie nehme ich die ganze Visualisierung auf, nicht nur ein Standbild?
Tippe auf das Video-Symbol über dem Canvas, um die Live-Visualisierung mit eingebettetem Audio als WebM aufzunehmen. Bei Dateien nehmen wir den kompletten Track von Anfang an auf; beim Mikrofon zeichnen wir einen 30-Sekunden-Clip auf. Der PNG-Button daneben erfasst ein einzelnes Bild, wenn du nur ein Standbild brauchst.
Was genau verändert der Empfindlichkeitsregler?
Er skaliert die Amplitude vor dem Zeichnen. Niedrige Werte halten die Balken bei lauten Mastern im Bildrahmen, hohe Werte heben leise Quellen wie Geflüster oder sauber gezupfte Akustikgitarre hervor.
Warum sieht man bei einem reinen Sinus nur wenige Balken?
Ein reiner Sinus besteht aus einer Grundfrequenz und ein paar Harmonischen, also liegen die meisten FFT-Bins nahe null. Das Spektrum verhält sich genau richtig. Spiele Musik oder Sprache ab, dann leuchtet der gesamte Bereich.

Ähnliche Tools