music_note Online-Metronom (Klopftempo) star

Warum die meisten Browser-Metronome aus dem Takt geraten

Der naheliegende Weg, ein Metronom in JavaScript zu bauen, ist setInterval(playClick, 60000 / bpm). Das funktioniert ein paar Sekunden lang — dann nicht mehr. setInterval garantiert lediglich, dass ein Callback nicht früher als die angeforderte Verzögerung ausgelöst wird, niemals wie viel später er tatsächlich läuft. Der JS-Hauptthread wird mit allem geteilt, was die Seite sonst tut — DOM-Updates, Layoutberechnungen, Garbage Collection — und jedes davon kann einen wartenden Timer um Dutzende Millisekunden verzögern. Für die meisten UI-Abläufe ist das unsichtbar; für ein Metronom ist es fatal, denn ein Klick, der diesen Schlag 40ms zu spät kommt und den nächsten 10ms zu spät, wandert hörbar, statt bloß leicht daneben zu klingen, und führt einen Musiker, der danach übt, aktiv in die Irre.

Musiker verlassen sich auf ein Metronom genau deshalb, weil die menschliche Wahrnehmung von gleichmäßiger Zeit ohne externe Referenz unzuverlässig ist — der eigentliche Sinn des Geräts, seit Johann Maelzel 1815 die Aufziehversion patentieren ließ. Ein Software-Metronom, das selbst aus dem Takt gerät, unterläuft genau diesen Zweck, und die Lösung ist kein cleverer Timer: Jeder JS-Timer, einschließlich requestAnimationFrame, teilt sich denselben Engpass am Hauptthread. Die eigentliche Lösung besteht darin, JavaScript gar nicht erst zu bitten, den Klang im richtigen Moment selbst zu erzeugen.

Look-Ahead-Scheduling: Wie dieses Metronom präzise bleibt

Dieses Tool verwendet das Muster, das Chris Wilson, ehemals im Web-Audio-Team von Google Chrome, in seinem vielzitierten Artikel „A Tale of Two Clocks" populär gemacht hat: Scheduling-Logik und Klangzeitpunkt vollständig voneinander zu trennen. Der AudioContext der Web Audio API läuft auf seinem eigenen Audio-Thread mit einer sample-genauen Uhr, die JavaScript als AudioContext.currentTime zur Verfügung steht. Ruft man osc.start(t) mit einem zukünftigen Zeitstempel dieser Uhr auf, spielt die Audio-Engine den Ton exakt zum Zeitpunkt t ab — unabhängig davon, was der Hauptthread in diesem Moment gerade tut; er musste nie präzise auf den Schlag genau „aufwachen", damit es funktioniert.

Die einzige Aufgabe des Hauptthreads ist Buchhaltung: Etwa alle 25ms prüft ein Scheduler, welche Schläge innerhalb der nächsten 100ms fällig sind, und ruft für jeden osc.start() mit dessen exaktem zukünftigem currentTime-Wert auf. Da diese Schleife nur ungefähr pünktlich sein muss, verursacht gewöhnliches Jitter kein hörbares Problem — der Klang ist trotzdem mit sample-genauer Präzision geplant. Jeder Klick ist ein rund 30ms kurzer Oszillator-Impuls, der auf dem ersten Schlag jedes Takts höher klingt, um einen hörbaren Akzent zu setzen, synchron mit einem passenden visuellen Puls.

Klopftempo löst ein anderes Problem: das BPM eines Musikstücks zu finden, ohne Noten zum Nachlesen zu haben. Tippen Sie im Takt des Schlags; das Tool misst das Intervall zwischen den Klicks und rechnet es mit 60000 / durchschnittlichesIntervallMs um. Es sind mindestens zwei Klicks nötig, und die Mittelung der letzten Klicks gleicht kleine Timing-Fehler aus. Eine Pause von mehr als zwei Sekunden setzt die Folge zurück, da das meist bedeutet, dass der Takt verloren wurde, statt sich nur stark zu verlangsamen.