Dynamics Playground. Kompressor, Gate & Co. zum Anschauen.

Wer am Mischpult anfängt, lernt schnell die Begriffe: Threshold, Ratio, Attack, Release. Was sie bewirken, ist dagegen schwer zu hören. Ein paar Dezibel weniger Dynamik fallen auf Laptop-Lautsprechern kaum auf, und in einer vollen Halle schon gar nicht. Genau das macht es schwierig, Ehrenamtlichen am Pult zu erklären, warum ein Kompressor so eingestellt ist und nicht anders.

Dafür hatte ich schon 2022 etwas gebaut. Jetzt habe ich es neu aufgebaut, mit sechs Geräten, animierten Anzeigen und echter Musik. Das Ziel ist dasselbe geblieben: Man soll sehen, was man hört.

Ausprobieren: Dynamics Playground live

Wie es anfing: der Simulator von 2022

Die erste Version war ein kleines Projekt aus reinem HTML, CSS und JavaScript, ohne Framework. Die Idee stand damals schon im Infotext der Seite: Kompression ist oft schwer zu hören, deshalb hilft es, ihre Wirkung an einer Wellenform sichtbar zu machen.

Statt echter Musik gab es ein berechnetes Signal aus ein paar hundert Werten: ein kräftiger Anschlag am Anfang, danach ein Verlauf, der abklingt und wieder anschwillt, ähnlich der Hüllkurve eines Instruments. Diese Kurve lief Wert für Wert durch die Kompressor-Formel. Lag der Pegel über dem Threshold, wurde der Überschuss entsprechend der Ratio verkleinert. Attack und Release glätteten die Absenkung, damit sie nicht sprunghaft einsetzte, und das Makeup Gain hob das Ergebnis wieder an.

Gezeichnet wurde auf einem canvas: das Original in Gelb, das komprimierte Signal in Blau darüber, die Gain Reduction in Rot von oben und eine weiße Linie für den Threshold. Links fünf Eingabefelder, rechts die Zeichnung, und jede Änderung zeichnete das Bild sofort neu.

Das Prinzip trägt bis heute. Es fehlte aber einiges: Man konnte nichts hören, es gab nur einen Kompressor, und das Bild stand still. Genau dort setzt die neue Version an.

Sechs Geräte, ein Prinzip

Oben wechselt man per Tab das Gerät, links sitzen die Regler, rechts die Anzeige. Die Optik orientiert sich an den Bildschirmen großer Digitalpulte, damit sich das Gelernte direkt auf das echte Pult übertragen lässt.

• Compressor: Threshold, Ratio, Attack, Release, Gain, Soft Knee, Peak oder RMS und ein Mix-Regler für Parallelkompression
• Limiter: Brickwall mit Lookahead, kein Peak kommt über die Ceiling
• Gate und Expander: mit Hold, Depth und Key-Filter, damit Becken das Tom-Gate nicht öffnen
• Multiband: vier Bänder mit eigener Kompression, die Bänder schrumpfen in der Grafik sichtbar mit der Gain Reduction
• De-Esser: Split oder Breitband, mit Listen-Taste, die nur die S-Laute hörbar macht
• Parametric EQ: vier Bänder plus Hoch- und Tiefpass, ziehbare Punkte und ein Spektrum-Analyzer während der Wiedergabe

Sehen, was man hört

Jede Änderung zeigt sofort Wirkung, auch ohne Ton:

• Die Kennlinie zeigt, wie aus Eingangspegel Ausgangspegel wird. Ein gelber Punkt wandert im Takt der Musik darauf entlang, und die farbigen Kreise lassen sich direkt ziehen.
• Die laufende Wellenform zeigt den Eingang als Kontur, den Ausgang farbig und die Gain Reduction oben in Orange. Man sieht, wie der Kompressor bei jedem Schlag zupackt und wieder loslässt.
• Standbild: Ein Klick hält Ton und Animation an. Dann ändert man einen Regler und sieht den Unterschied an genau einem Moment, statt einem laufenden Film hinterherzuschauen.
• Bypass schaltet den Effekt für den direkten A/B-Vergleich ab.

Echte Musik statt Testtönen

Anfangs liefen auch in der neuen Version synthetische Testsignale durch die Geräte. Das funktionierte, klang aber nach Labor. Jetzt steckt eine echte Mehrspur-Aufnahme dahinter: „You Know Better“ von Hannes Keseberg, die Cambridge-MT für Bildungszwecke bereitstellt. Aus den 21 Spuren mischt ein kleines Skript mit ffmpeg einzelne Signale: Drums, Toms, Percussion, Bass, Gitarre, Keys, Stimme und den ganzen Mix.

Das hat einen schönen Nebeneffekt: Die rohen Tom-Mikros fangen Snare, Kick und Becken mit ein. Genau dieses Übersprechen soll ein Gate entfernen, und an echtem Material sieht man sofort, warum es ohne Key-Filter nicht funktioniert.

Voreinstellungen für den Unterricht

Jedes Gerät hat eine kleine Library mit Voreinstellungen wie „Gesang live“, „Drums Punch“ oder „Toms ohne Key-Filter“. Ein Klick setzt die Werte, wählt das passende Signal und erklärt in einem Satz, worauf man hören soll. Ein paar sind absichtlich übertrieben, etwa „Zu viel!“ oder die Smiley-Kurve beim EQ. Wie es nicht klingen soll, lernt man oft am schnellsten.

Technik

Aus dem Framework-freien Projekt von damals ist eine App mit Vue 3, Pinia, TypeScript und Vite geworden, weiterhin ohne Backend. Jedes Gerät hat einen eigenen Store, Einstellungen und Sprache landen im localStorage. Die Oberfläche gibt es auf Deutsch und Englisch.

Das Herz sind die DSP-Klassen in reinem TypeScript, ohne Abhängigkeit von Vue: Filter, Kennlinien und ein Effekt pro Gerät. Dieselben Klassen laufen zweimal. In einem AudioWorklet erzeugen sie den hörbaren Ton, in einem Web Worker rechnen sie die ganze Schleife vorab für die Anzeige. So passt das Bild immer zum Ton, und die Anzeige läuft auch dann, wenn gerade nichts abgespielt wird.

Unit-Tests prüfen die Rechnung, zum Beispiel dass die vier Multiband-Bänder zusammen wieder das Original ergeben und dass kein Sample über die Ceiling des Limiters kommt. Eine GitHub Action testet, baut und veröffentlicht bei jedem Push auf GitHub Pages.

Was ich dabei gelernt habe

• Bewegung hilft, Stillstand auch. Die Animation zieht den Blick an, aber zum Vergleichen braucht man ein stehendes Bild. Erst mit dem Standbild wurde das Tool zum Lehrmittel.
• Messen ersetzt kein Hören. Beim Abmischen zeigte die Messung, warum die Kick kaum zu hören war: Sie spielt fast immer gleichzeitig mit der Snare. Ein künstlicher Klick-Layer machte sie messbar lauter, klang aber schlechter. Am Ende entscheidet das Ohr.
• Eine Rechnung für Bild und Ton. Hätte die Anzeige eine eigene, vereinfachte Formel, würde sie früher oder später etwas anderes zeigen, als man hört. Gemeinsame DSP-Klassen verhindern das.
• Kleine Bedienhilfen zählen. Größere Greifflächen für die Punkte, ein Signal, das beim Gerätewechsel erhalten bleibt, ein fester Kopfbereich beim Scrollen: Keine dieser Kleinigkeiten fällt auf, solange sie funktioniert.

Mein Fazit

Dynamikbearbeitung ist keine Raketen-Wissenschaft, aber sie ist unsichtbar. Sobald man sieht, wie ein Gate öffnet oder ein Limiter die Spitzen abfängt, fallen die Begriffe von allein an ihren Platz. Genau dafür ist der Dynamics Playground da: zum Ausprobieren, Vergleichen und Verstehen, bevor man am echten Pult steht.