Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Soundausgabe reagiert nicht und Anzeige wird nicht aktualisiert
#1
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/):

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>
Zitieren
#2
So ganz verstehe ich das auch noch nicht. Wenn du im debuggen schaust und dir das Element anschaust , siehst du auch das da die Buchstaben angezeigt werden. Warum nicht auf der Seite verstehe ich gerade auch noch nicht.
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#3
Du solltest mal versuchen die while schleife zu tauschen gegen ein setInterval 50ms oder so . Ich denke, das die Schleife zu schnell ist, um das anzuzeigen.
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#4
Nach der while-Schleife kommt weiterer Code, der erst nach dem Ende der Schleife durchlaufen werden darf. Wenn ich es richtig verstehe, läuft setInterval synchron, sodass der nachfolgende Code sofort bzw. zeitgleich zum Code in setInterval ausgeführt wird.
Was ich bräuchte ist eine sleep-Funktion, die javascript aber nicht anbietet.
Ich habe mittlerweile aber eine Möglichkeit gefunden, eine sleep-Funktion mit Hilfe eines Promise zu simulieren:

Code:
<script>
         const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
        async function startCountdown() {

            ...

            // 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) {
                if (soundClack.currentTime < soundClack.duration) {
                            soundClack.pause();
                            soundClack.currentTime = 0;
                        }
            soundClack.play();
                        ...
                        await sleep(2);
                    }
                    else {
                        ...
                    }
                }
            }
        }
</script>

Jetzt läuft die Anzeige der Buchstaben korrekt. Big Grin

Durch das Stoppen und Zurücksetzen der Soundausgabe ist auch diese besser geworden, aber noch nicht ganz das Gelbe vom Ei. Zu Beginn der Schleife, wenn das Intervall noch klein ist, wird der Klang nur sporadisch abgespielt.
Hier wäre ich über weitere Ideen dankbar.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste