Eieruhr

So funktioniert das Script

Zwei Dinge machen aus einem Countdown einen brauchbaren Wecker: eine Zeitmessung, die nicht nachgeht, und ein Ton, der ohne Tondatei auskommt.

endzeit = Date.now() + rest * 1000;
…
rest = Math.max(0, Math.round((endzeit - Date.now()) / 1000));

Hier steckt der wichtigste Gedanke. Der naheliegende Weg wäre, alle tausend Millisekunden eine Sekunde abzuziehen. Das geht schief: Intervalle sind nie exakt, und sobald der Reiter in den Hintergrund rückt, bremsen Browser sie auf einen Aufruf pro Sekunde oder seltener — ein Wecker, der so zählt, geht nach Minuten deutlich nach.

Deshalb wird beim Start der Zeitpunkt des Endes festgehalten, und bei jedem Tick wird der Abstand dorthin neu ausgerechnet. Ob dazwischen zehn Ticks ausgefallen sind, spielt keine Rolle — die Anzeige springt dann eben, aber die Zeit stimmt. Dasselbe Prinzip wie bei der Stoppuhr, nur andersherum.

const schwinger = tonkanal.createOscillator();
schwinger.type = "sine";
schwinger.frequency.value = hertz;

Der Ton entsteht aus einem Schwingungserzeuger — genau wie in einem Synthesizer. sine ist die reine Sinusschwingung und klingt weich; square gäbe einen scharfen Piepton wie bei alten Geräten, sawtooth einen schnarrenden. 880 Hertz sind das a der zweigestrichenen Oktave, ein Ton, der sich gut durchsetzt, ohne zu stechen.

regler.gain.setValueAtTime(0, start);
regler.gain.linearRampToValueAtTime(0.3, start + 0.02);
regler.gain.linearRampToValueAtTime(0, start + dauer);

Der Regler steuert die Lautstärke über die Zeit. Diese drei Zeilen bewirken ein sanftes Ein- und Ausblenden über 20 Millisekunden. Ohne sie beginnt und endet die Schwingung abrupt mitten im Ausschlag, und man hört ein deutliches Knacken — der häufigste Fehler bei selbstgebauten Tönen. Die 0,3 statt 1,0 als Höchstwert hält die Lautstärke im erträglichen Bereich.

if (tonkanal === null) {
  const Kanal = window.AudioContext || window.webkitAudioContext;
  if (!Kanal) return;
  tonkanal = new Kanal();
}

Der Tonkanal wird erst beim ersten Klick angelegt. Das ist keine Sparmaßnahme, sondern nötig: Browser verweigern die Tonausgabe, solange der Besucher die Seite nicht angeklickt hat — eine Regel gegen ungefragt lärmende Werbung. Weil der Wecker ohnehin per Knopf startet, fällt die Einschränkung hier nicht auf.

tonGeben(880, 0.25, 0);
tonGeben(880, 0.25, 0.4);
tonGeben(1320, 0.5, 0.8);

Das Signal besteht aus drei Tönen, deren Startzeitpunkte im Voraus festgelegt werden — der dritte beginnt 0,8 Sekunden nach dem ersten und liegt eine Quinte höher. Diese Planung im Voraus ist der große Vorteil der Tonschnittstelle: Sie arbeitet mit einer eigenen, sehr genauen Uhr, und die Töne kommen auch dann pünktlich, wenn das Script gerade mit anderem beschäftigt ist.

document.title = laeuft ? alsZeit(rest) + " – " + urspruenglicherTitel : …;

Der Reitertitel wird zur Zweitanzeige. Wer währenddessen in einem anderen Reiter arbeitet, sieht die Restzeit trotzdem — ein kleiner Kunstgriff, den viele Web-Wecker benutzen und der nichts kostet.

Zum Anpassen: Für einen anderen Klang ändert ihr Tonhöhe, Dauer und Wellenform in tonGeben. Wollt ihr eine Benachrichtigung auch bei geschlossenem Reiter, führt der Weg über die Benachrichtigungs-Schnittstelle des Browsers — die verlangt allerdings eine ausdrückliche Erlaubnis des Besuchers.