11.07.2022, 11:59
Hallo zusammen,
ich fange gerade mit HTML und Javascript an und versuche mich gerade daran, in einem <div>-Element zufällig ausgewählte Buchstaben in immer langsamer werdender Abfolge anzuzeigen. Bei jedem neuen Buchstaben soll ein Klack-Geräusch ausgegeben werden, damit der Eindruck eines sich drehenden Glücksrades entsteht. Der Vorgang soll ca. 7 Sekunden dauern und wird über eine while-Schleife gesteuert. Am Ende der Schleife ertönt ein "Ding"-Sound.
Leider passiert während dem Schleifendurchlauf in der Anzeige gar nichts und auch kein Klang wird ausgegeben. Erst am Ende der Schleife wird der letzte ermittelte Buchstabe angezeigt, ein einziges Klack-Geräusch ausgegeben (vermutlich das, das eigentlich vor Beginn der Schleife ertönen soll) und gleich darauf der "Ding"-Sound aus dem letzten Code-Abschnitt abgespielt.
Wenn ich den Code im Debugger Schritt für Schritt durchlaufe, funktioniert alles wie erwartet und auch die Konsolenausgabe ist korrekt. Auch der korrekte zeitliche Ablauf ist in der Konsole erkennbar, sodass mein Code prinzipiell wohl korrekt ist. Ganz offensichtlich fehlt aber die richtige Anzeige- und Soundsteuerung.
Über hilfreiche Tipps wäre ich sehr dankbar.
Hier der Code (die beiden Sounddateien findet ihr im Anhang, sie stammen von https://freesound.org/):
ich fange gerade mit HTML und Javascript an und versuche mich gerade daran, in einem <div>-Element zufällig ausgewählte Buchstaben in immer langsamer werdender Abfolge anzuzeigen. Bei jedem neuen Buchstaben soll ein Klack-Geräusch ausgegeben werden, damit der Eindruck eines sich drehenden Glücksrades entsteht. Der Vorgang soll ca. 7 Sekunden dauern und wird über eine while-Schleife gesteuert. Am Ende der Schleife ertönt ein "Ding"-Sound.
Leider passiert während dem Schleifendurchlauf in der Anzeige gar nichts und auch kein Klang wird ausgegeben. Erst am Ende der Schleife wird der letzte ermittelte Buchstabe angezeigt, ein einziges Klack-Geräusch ausgegeben (vermutlich das, das eigentlich vor Beginn der Schleife ertönen soll) und gleich darauf der "Ding"-Sound aus dem letzten Code-Abschnitt abgespielt.
Wenn ich den Code im Debugger Schritt für Schritt durchlaufe, funktioniert alles wie erwartet und auch die Konsolenausgabe ist korrekt. Auch der korrekte zeitliche Ablauf ist in der Konsole erkennbar, sodass mein Code prinzipiell wohl korrekt ist. Ganz offensichtlich fehlt aber die richtige Anzeige- und Soundsteuerung.
Über hilfreiche Tipps wäre ich sehr dankbar.
Hier der Code (die beiden Sounddateien findet ihr im Anhang, sie stammen von https://freesound.org/):
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function startCountdown() {
const soundClack = new Audio('sounds/90384__tomkuhn__klack1.wav');
const soundDing = new Audio('sounds/88656__blimp66__ding-delayed.mp3');
let soundInterval = 50; // Start value of the interval
const SOUND_INTVAL_INCR_FACTOR = 1.025; // Power factor by which the interval will be increased
let totalTime = soundInterval; // Counts the elapsed duration of the countdown
const TOTAL_TIME_MAX = 7000; // The minimum duration of the countdown
let startTime; // The begin of the current interval
let countdownFinished = false;
const letterBox = document.getElementById("letterBox");
// Initial clack sound to start the countdown
soundClack.play();
// Run the countdown
startTime = new Date().getTime(); // Get the starting point of the current interval
while (!countdownFinished) {
let currTime = new Date().getTime(); // Get the current time stamp
if (currTime - startTime >= soundInterval) {
if (totalTime < TOTAL_TIME_MAX) {
soundClack.play();
let letter = String.fromCharCode(Math.floor(Math.random() * (90 - 65 + 1)) + 65);
letterBox.textContent = letter;
console.log("After " + soundInterval + " ms: " + letterBox.textContent);
soundInterval = Math.round(Math.pow(soundInterval, SOUND_INTVAL_INCR_FACTOR));
totalTime += soundInterval;
startTime = new Date().getTime();
}
else {
soundDing.play();
letterBox.textContent = String.fromCharCode(Math.floor(Math.random() * (90 - 65 + 1)) + 65);
console.log("After " + soundInterval + " ms: " + letterBox.textContent);
countdownFinished = true;
}
}
}
}
</script>
</head>
<body>
<div id="letterBox" style="font-size: 80px; cursor: pointer" onclick="startCountdown()">
A
</div>
</body>
</html>
