Wie funktioniert ein Musik-Visualizer? FFT, Beat-Erkennung und Shader
Ein guter Visualizer wirkt, als würde er die Musik verstehen: Der Boden springt bei der Kick, Funken fliegen bei den Hi-Hats, die Farben schwellen an, wenn der Refrain einsetzt. Magie steckt nicht dahinter. Jeder Visualizer erledigt viele Male pro Sekunde dieselben zwei Aufgaben: Er misst den Klang und zeichnet dann aus diesen Messwerten ein Bild. So funktionieren die einzelnen Teile.
1. Von der Schallwelle zum Spektrum
Digitales Audio ist ein Strom aus Samples, meist 44.100 oder 48.000 pro Sekunde, jedes davon die Position der Lautsprechermembran in diesem Moment. Diese rohe Wellenform verrät, wie laut der Klang ist, aber nicht, was darin steckt. Um Bass und Becken getrennt zu sehen, nimmt ein Visualizer einen kurzen Ausschnitt von Samples (oft 1.024 oder 2.048) und berechnet darauf eine schnelle Fourier-Transformation (FFT).
Die FFT zerlegt den Ausschnitt in Frequenzbereiche (Bins) und gibt an, wie viel Energie in jedem steckt. Das ist das Spektrum: die bekannte Reihe von Balken, tiefe Töne links, hohe rechts. Im Browser übernimmt das der AnalyserNode der Web Audio API.
Die Bins sind in Hertz gleichmäßig verteilt, das Gehör aber nicht: Eine Oktave im Bass umfasst wenige Bins, eine Oktave in den Höhen Hunderte. Deshalb gruppieren Visualizer die Bins auf einer logarithmischen Skala neu, und viele normieren das Spektrum zusätzlich, damit leise und laute Aufnahmen gleichermaßen den Bildschirm füllen.
2. Bässe, Mitten und Höhen
Die meisten Presets brauchen keine tausend Zahlen, sondern ein paar: Wie laut ist der Tiefbereich, die Mitte, die Spitze? Fasst man das Spektrum zu Bändern zusammen, bekommt man genau das. Grobe Grenzen liegen bei etwa 20–250 Hz für Bass, bis zu einigen Kilohertz für Mitten und darüber für Höhen, aber jeder Visualizer zieht die Linien etwas anders.
In Deus heißen sie Bass (Tiefbereich), Mitten (Gesang, Keys, Gitarren) und Höhen (Luft und Becken), dazu ein Gesamt-Pegel. Ein Tunnel kann sich mit dem Bass schneller bewegen, während die Höhen Funkeln hinzufügen.
3. Glättung: warum Balken nicht flackern
Rohe FFT-Werte springen von Frame zu Frame. Direkt gezeichnet flackern sie. Deshalb glätten Visualizer sie, meist indem sie jeden neuen Wert mit dem vorherigen mischen. Viele nutzen unterschiedliche Geschwindigkeiten für Anstieg und Abfall: schnell steigen, damit ein Schlag sofort wirkt, langsam fallen, damit das Bild nicht zuckt. Wie stark geglättet wird, ist ein Kompromiss zwischen ruhiger Bewegung und präzisem Timing.
4. Onsets und Beats: Kick, Snare und Hi-Hat
Die Glättung verwischt genau das, was Menschen am stärksten wahrnehmen: die Schläge. Deshalb werden Schläge separat gemessen. Das übliche Werkzeug ist die Onset-Erkennung: beobachten, wie schnell die Energie steigt, mit dem jüngsten Durchschnitt vergleichen und auslösen, wenn sie über einen Schwellenwert springt. Der Tiefbereich verrät Kicks, die mittleren und rauschhaften Bänder Snares und Claps, ganz oben Hi-Hats und Shaker.
Deus stellt das als mehrere Merkmale bereit: Attack (scharfe Einsätze über das ganze Spektrum), Bass-Impuls und Höhen-Impuls (plötzliche Anstiege) sowie getrennte Erkennung für Kick, Snare und Hi-Hat. Energie verfolgt, wie viel in den letzten Sekunden los war, sodass ein Preset sich durch einen Drop steigern und im Breakdown entspannen kann.
5. Noten
Manche Visuals folgen der Harmonie statt dem Rhythmus. Faltet man das Spektrum auf die 12 Tonklassen (C, Cis, D und so weiter, ohne Oktave), erhält man einen Chroma-Vektor: welche Töne gerade klingen. Deus nennt das Noten und nutzt es für notenreaktive Presets.
6. Zeichnen: Shader auf der Grafikkarte
Die Messwerte sind nur eine Handvoll Zahlen pro Frame. Die eigentliche Arbeit steckt im Bild. Moderne Visualizer zeichnen mit Shadern: kleinen Programmen, die auf der GPU laufen, oft einmal für jedes Pixel auf dem Bildschirm, parallel. Die Audiomerkmale kommen als Eingaben (sogenannte Uniforms) an, und der Shader macht daraus Farbe: die Geschwindigkeit eines Tunnels, den Zoom eines Fraktals, die Helligkeit eines Blitzes.
Deus zeichnet seine eigenen Szenen als WebGL-Shader. In Deus Studio kannst du selbst einen in GLSL schreiben, mit Live-Frequenz-Arrays, Pegel, Bass, Mitten, Höhen, Impulsen, Drum-Schlägen und Notenintensität als Eingaben sowie mainImage und iTime im Shadertoy-Stil.
7. Feedback: der MilkDrop-Trick
MilkDrop, der Visualizer aus der Winamp-Zeit, hat eine einfache Idee berühmt gemacht. Jedes Frame beginnt mit dem vorherigen Frame, leicht gezoomt, gedreht und verzerrt, und neue Wellen werden darübergezeichnet. Weil jedes Bild in das nächste einfließt, summieren sich kleine Bewegungen zu Spuren, Tunneln und flüssigen Mustern. Beats und Lautstärke steuern Zoom und Farbe. Deus spielt klassische MilkDrop-Presets im Browser, jedes mit den Namen seiner Autoren.
8. Ganz ohne Analyse: das XY-Oszilloskop
Das Oszilloskop überspringt das Spektrum komplett. Es zeichnet die rohe Stereo-Wellenform, jedes Sample: Der linke Kanal bewegt den Strahl seitwärts, der rechte nach oben und unten. Mono-Ton zeichnet eine Diagonale, breites Stereo zeichnet Formen, und Musik, die dafür gemacht ist, zeichnet Bilder. Mehr dazu unter Oszilloskop-Musik.
Warum manche Songs besser aussehen als andere
Visualizer reagieren auf das, was sich messen lässt. Musik mit klaren Drums und kräftigem Tiefbereich liefert saubere Kicks und große Bass-Ausschläge. Ambient, Solo-Klavier oder Sprache haben wenige scharfe Einsätze, also bewegt sich das Bild langsamer. Stark komprimierte Master können jedes Band nahe am Maximum halten, was weniger Kontrast zum Zeigen übrig lässt.
Probier es mit deiner eigenen Musik
In Deus hört jedes Preset, ob WebGL, Canvas 2D, MilkDrop oder Oszilloskop, auf dieselbe Analyse, die lokal in deinem Browser auf dem gewählten Tab läuft. Nichts wird aufgezeichnet oder hochgeladen. Fang mit dem Visualizer für jeden Tab an, oder mach daraus ein Video.