Metronom

So funktioniert das Script

Das Herzstück ist der Taktgeber — und er löst ein Problem, an dem naive Metronome scheitern: JavaScript kann keine Töne pünktlich auslösen.

planer = setInterval(planen, 25);

Der naheliegende Bauplan wäre setInterval(klickGeben, 60000 / tempo) — alle 600 Millisekunden ein Klick bei Tempo 100. Das klingt schrecklich. Ein Intervall ist nur eine Bitte an den Browser, und je nachdem, was er gerade sonst tut, kommt der Aufruf 5, 20 oder 50 Millisekunden zu spät. Beim Ton hört man das sofort als Schleppen, weil das Gehör Abweichungen ab etwa zwei Millisekunden wahrnimmt.

while (naechsterSchlag < tonkanal.currentTime + 0.1) {
  klick(naechsterSchlag, betont);
  naechsterSchlag += 60 / tempo;
  schlagNummer++;
}

Die Lösung heißt Vorausplanung. Der Wecker läuft sehr häufig — alle 25 Millisekunden — und tut selbst gar nichts Hörbares. Er schaut nur nach, welche Schläge in den nächsten 100 Millisekunden fällig sind, und trägt sie mit ihrem genauen Zeitpunkt in die Tonuhr ein. Die Tonverarbeitung des Browsers läuft in einem eigenen Strang mit eigener, sehr genauer Uhr und spielt die Töne auf die Millisekunde pünktlich ab.

Der Wecker darf also ruhig unpünktlich sein: Solange er irgendwann innerhalb der 100 Millisekunden zum Zug kommt, sind die Töne längst eingeplant. Diese Aufteilung — ungenauer Planer, genaue Tonuhr — ist das Standardverfahren für jede Art von Musikprogrammierung im Browser.

naechsterSchlag += 60 / tempo;

Der Abstand zwischen zwei Schlägen in Sekunden ist 60 geteilt durch die Schläge je Minute — bei Tempo 100 also 0,6 Sekunden. Wichtig ist, dass hier addiert und nicht bei jedem Schlag neu gerechnet wird: So summieren sich keine Rundungsfehler auf, und der hundertste Schlag liegt exakt so weit vom ersten entfernt, wie er soll.

regler.gain.exponentialRampToValueAtTime(0.0001, zeitpunkt + 0.05);

Der Klick ist ein sehr kurzer Ton mit schnellem Abfall. Der Abfall verläuft exponentiell statt linear, weil das Gehör Lautstärke logarithmisch wahrnimmt — exponentiell klingt natürlicher. Der Zielwert ist 0,0001 und nicht 0, denn ein exponentieller Verlauf kann die Null nie erreichen; ein Versuch damit führt zu einem Fehler.

const spanne = tippzeiten[tippzeiten.length - 1] - tippzeiten[0];
const abstand = spanne / (tippzeiten.length - 1);
tempoSetzen(60000 / abstand);

Das Tempo-Antippen mittelt über die letzten Klicks: Gesamtspanne geteilt durch die Anzahl der Zwischenräume. Wichtig ist die Zahl der Zwischenräume, nicht der Klicks — bei fünf Klicks sind es vier. Aus dem mittleren Abstand in Millisekunden werden mit 60000 / abstand die Schläge je Minute. Und weil nur die letzten sechs Klicks behalten werden, folgt die Anzeige einer Tempoänderung schnell, statt ewig am alten Mittelwert zu hängen.

Zum Anpassen: Für Achtel- oder Triolenunterteilung plant ihr zwischen den Hauptschlägen zusätzliche, leisere Klicks ein. Für einen anderen Klang genügt es, Wellenform und Frequenz zu ändern — square klingt nach Digitaluhr, sine weicher, und mit einem sehr kurzen Rauschen käme man einem Holzblock nahe.