Count down-Uhr, Audiodatei wird nicht abgespielt bearbeitet von Franck Dettfurth 07.03.2024 10:03 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. --------------------------------- ~~~html <!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> ~~~
Count down-Uhr, Audiodatei wird nicht abgespielt bearbeitet von Rolf B 07.03.2024 10:12 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>
nicht angemeldet
