Franck Dettfurth: Count down-Uhr, Audiodatei wird nicht abgespielt

Beitrag lesen

Hallo: 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.

Danke schon mal für die Hilfe & Gruß, Franck.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Clock with Audio</title>
<style>
  body {
    font-family: Trebuchet MS, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('https://schulressourcen.de/schulressourcen/0repositorium/bkgrd_pic1.jpg'); /* Background picture */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white; /* Font color */
  }
  #countdown {
    font-size: 200px;
    font-weight: bold; /* Font bold */
  }
</style>
</head>
<body>

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

<audio id="audio" src="https://schulressourcen.de/schulressourcen/0repositorium/thx.wav"></audio>

<script>
// 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;

  // 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);
    
    // Format minutes, seconds, and tenths to add leading zeros if needed
    var formattedMinutes = (minutes < 10) ? "0" + minutes : minutes;
    var formattedSeconds = (seconds < 10) ? "0" + seconds : seconds;
    var formattedTenths = tenths;
    if (formattedTenths < 10) {
      formattedTenths = "0" + formattedTenths;
    }

    // Display the countdown
    document.getElementById("countdown").innerHTML = formattedMinutes + ":" + formattedSeconds + "." + formattedTenths;
    
    // If the countdown reaches 00:10, play the audio
    if (formattedMinutes == "00" && formattedSeconds == "10") {
      document.getElementById("audio").play();
    }
    
    // If the countdown is over, display a message
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "00:00.0";
    }
  }, 100);
}

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

</body>
</html>