Audio Visualizer

Erfasse Sound über das Mikrofon in Echtzeit und verwandle Audio in beeindruckende dynamische Grafiken. Unterstützt Spektrumbalken, Wellenform, kreisförmiges Spektrum und Partikel-Visualisierungsmodi.

Mikrofon

Audio Visualizer

Erfasse Sound über das Mikrofon in Echtzeit und verwandle ihn in beeindruckende dynamische Grafiken. Unterstützt Spektrumbalken, Wellenform, kreisförmiges Spektrum und Orchester-Visualisierungsmodi.

Bitte klicke unten auf die Schaltfläche „Start", um zu beginnen

Farbschema

Audio-Visualizer-Leitfaden

Anleitung zum Audio Visualizer

Grundbedienung

  1. Klicke auf die Schaltfläche „Start"
  2. Erlaube den Mikrofonzugriff in der Browser-Abfrage
  3. Sprich, singe oder spiele Musik in das Mikrofon
  4. Beobachte die dynamischen Grafiken in Echtzeit

Vier Visualisierungsmodi

Spektrumbalken

Zeigt die Frequenzverteilung des Audios als Balkendiagramm — niedrige Frequenzen links, hohe rechts, wobei die Balkenhöhe die Energie in jedem Frequenzband widerspiegelt. Gut geeignet, um Bass/Höhen-Verteilung zu beobachten.

Wellenform

Zeigt die Zeitbereichs-Wellenform des Sounds im Oszilloskop-Stil, mit symmetrischen, doppellagigen glühenden Linien, die Amplitude und Frequenzänderungen visualisieren.

Kreis

Erweitert das Spektrum zu einem 360-Grad-Ring. Der Mittelkreis pulsiert mit der Lautstärke, die äußeren Balken hüpfen mit der Frequenz — der optisch beeindruckendste Modus.

Orchester

[Intelligente Klangfarben-Trennung] Die Echtzeit-Audioanalyse trennt und zeigt automatisch 5 Instrumentengruppen:

  • 🥁 Schlagzeug: Erkennt Transienten (plötzliche Energiespitzen)
  • 🎸 Bass: Erkennung der Harmoniestruktur tiefer Frequenzen
  • 🎤 Gesang/Streicher: Mittellage mit reichen Obertönen (Stimme, Violine)
  • 🎷 Holzbläser: Helle Mitten/Obertöne (Flöte, Klarinette)
  • ✨ Becken: Spektrale Flachheitserkennung für rauschartige hohe Frequenzen

Jede Spur zeigt eigenständige Spektrum-Wellenform, Energieanteil und dB-Werte. Perfekt zum Analysieren von Orchester- oder Mehrspur-Mixen.

Bedienelemente

  • Empfindlichkeit: Passt die Verstärkung des Audiosignals an (0,3–3,0); höhere Werte erzeugen dramatischere Visualisierungen
  • Glättung: Passt den Glättungskoeffizienten des Spektrums an (0–0,95); höhere Werte erzeugen weichere Übergänge
  • Farbschema: Fünf Farbschemata — Neon, Feuer, Ozean, Wald, Lila

Tastenkürzel

  • Space: Erfassung starten/stoppen
  • 1 / 2 / 3 / 4: Wechsel zwischen Balken / Welle / Kreis / Orchester

Technische Grundlagen

Web Audio API

Dieses Werkzeug basiert auf der Web Audio API des Browsers. Es erhält den Mikrofon-Audio-Stream über getUserMedia, verwendet AnalyserNode für die Echtzeit-FFT-Analyse (Fast Fourier Transform), um Zeitsignale in Frequenzbereichsdaten umzuwandeln, und rendert die Visualisierung im Canvas-2D-Kontext.

Frequenzanalyse

  • FFT-Größe: 2048, entspricht 1024 Frequenz-Bins
  • Abtastrate: Typischerweise 44100Hz oder 48000Hz
  • Frequenzauflösung: Abtastrate / FFT-Größe, ~21–23Hz pro Bin
  • Hörbereich des Menschen: ~20Hz–20000Hz

Tipps

  • Chrome- oder Edge-Browser für beste Leistung empfohlen
  • Nutze Kopfhörer oder externe Lautsprecher, um Mikrofon-Rückkopplung zu vermeiden
  • Weniger Umgebungslärm erzeugt sauberere Visualisierungen
  • Der Vollbildmodus bietet ein immersiveres Erlebnis