Count down-Uhr, Audiodatei wird nicht abgespielt

[Robert B.]

Moin Franck,

Hat jemand einen Tipp für mich, wo das Problem beim nachstehenden Code bestehen könnte? Die Audiodatei sollte bei Countdown 10 Sekunden abgespielt werden, aber es tut sich nichts - zumindest nicht im Browser. Beim Test auf W3Schools dagegen funktioniert alles wie gewollt.

#countdown {
    font-size: 200px;
    font-weight: bold; /* Font bold */
}

200 Pixel ist sehr groß – aber viel wichtiger ist die Frage, wie sich diese Größe beim Zoomen verhält? Die Empfehlung ist daher Schriftgrößen nicht in Pixel anzugeben, sondern z.B. in em.

<div id="countdown">01:00.0</div>

Hier wäre ein output-Element passender.

// JavaScript for the countdown clock
function startCountdown() {
  // Set the countdown duration to 15 seconds (in milliseconds)
  var countdownDuration = 15 * 1000; // 15 seconds * 1000 milliseconds
  
  // Set the time when the countdown should end
  var endTime = new Date().getTime() + countdownDuration;

Ich glaube, dass (relevante) Browser, die das audio-Element kennen, auch let und const kennen:

const duration_ms = 15 * 1000;    // oder gleich im Kopf: 15000

  // Update the countdown every 0.1 second
  var x = setInterval(function() {

    // Get the current date and time
    var now = new Date().getTime();
    
    // Calculate the distance between now and the end time
    var distance = endTime - now;
    
    // Calculate minutes, seconds, and tenths of seconds
    var minutes = Math.floor(distance / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    var tenths = Math.floor((distance % 1000) / 100);

Die Konstante 1000 * 60 kannst du außerhalb der Funktion einmal als Konstante festlegen und dann hier jedes Mal verwenden, das spart etwas CPU. Aber es geht noch etwas einfacher:

const fracSec = distance / 1e3;
const seconds = Math.floor(fracSec % 60);
const tenths  = Math.floor(fracSec % 1 * 10);

Oder mit Rolfs Tipp als Einzeiler:

// außerhalb des setTimeout:
const options = {
    'minute': 'numeric',
    'second': 'numeric',
    'fractionalSecondDigits': 1
};
const dateFormatter = new Intl.DateTimeFormat(undefined, options);

// Formatierung der Zeitdifferenz innerhalb der Funktion:
document.getElementById("countdown").innerText = dateFormatter.format(distance);

    // If the countdown reaches 00:10, play the audio
    if (formattedMinutes == "00" && formattedSeconds == "10") {
      document.getElementById("audio").play();
    }

Es kann passieren, dass genau diese Sekunde, warum auch immer, in der Anzeige übersprungen wird, d.h. der Vergleich auf kleiner-gleich und ob das Audio bereits läuft ist sicherer:

if (fracSec <= 10 && /* audio spielt noch nicht */) {
    document.querySelector('audio').play();
}

Ich habe jetzt auf die Stelle nicht herausfinden können, wie man herausfindet, ob ein Audio bereits spielt, daher der Kommentar für die zweite Bedingung oben.

    // If the countdown is over, display a message
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "00:00.0";
    }

Das sollte besser sein

if (distance <= 0) {
    clearInterval(x);
    document.getElementById("countdown").innerText = "00:00.0";
}

// Start the countdown when the page loads
window.onload = startCountdown;

Schöner wäre startCountdown als Event-Listener hinzuzufügen – load wartet ja bis alle Ressourcen geladen worden sind:

window.addEventListener('load', startCountdown);

Im Fehlerfall hilft dir auf jeden Fall ein Tastendruck auf F12 um in den Browser-Entwicklertools nach Meldungen zu schauen.

Viele Grüße
Robert