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>