• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] The play() request was interrupted by a call to pause().

S

Spix

New member
Hey Ho.
Für meine psychologische Studie habe ich ein Programm erstellt, mit dem die Probanden ein Musikstück erstellen können (im Anhang).

Der Proband kann mit Hilfe der nummerierten Buttons Töne auswählen. Dabei wird ein Ton abgespielt und die jeweilge Zahl in ein Array gepusht.

Code: 
function Schalter(Zahl){
	$Zahlen.push(Zahl);
	if (Zahl == "1"){
	$ASaite.play();
	}
	else if (Zahl == "2"){
	$DSaite.play();
	}
	...
document.getElementById("Zahlenanzeige").innerHTML = $Zahlen;
}

Danach kann er es sich mit dem Play Button anhören:

Code: 
function replay(){
	for (i = 0; i <= $Zahlen.length; i++){			
		if ($Zahlen[i] == "1"){
		$ASaite.play();
		sleep(500);
		}		
		else if ($Zahlen[i] == "2"){
		$DSaite.play();
		sleep(500);
		}
		...
	}
}


Leider hat der Play Button einen echt nervigen Bug für den ich keine mir verständliche Lösung finden kann :mad:.

Der vollständige Fehler lautet:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Die Folge daraus ist, dass jeder Ton nur ein Mal abgespielt wird und danach "verbraucht" ist. Jedes weitere Mal kommt nur eine halbe Sekunde lang nichts.


Ich freue mich auf eure Antworten

LG
 

Anhänge

  • Studie.zip
    96,5 KB · Aufrufe: 1
Zuletzt bearbeitet von einem Moderator:
Hast du es mal mit einer Verzögerung beim Aufruf probiert?
Code: 
setTimeout(function () {      
    if ($ASaite.paused) {
        $ASaite.play();
        sleep(500);
  }
}, 150);
 
Wo müsste das hin? Ich bin ein totaler Anfänger :D
Wenn man im Debugger einen Stop reinsetzt, dass man jeden Ton einzeln mit der weiter Taste abspielt, lädt er auch alle Töne. Außerdem habe ich eine Achtelpause (0) eingebaut. Wenn man z.B. 1-0-1 eingibt spielt er auch beide 1er. Nur zwei hintereinander mag er nicht
 
Zuletzt bearbeitet:
Das kommt von deinem künstlichen Delay vielleicht. Wie wäre es mit diesem Ansatz?
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kompositionsaufgabe</title>
    <style>
        body{
            text-align:center;
        }
        
        h1 {
            font-weight:bold;
        }
        
        #Zahlenanzeige {
            background-color:lime
        }
    </style>    
    <script>
        // Variablen definieren
        var audio = new Audio(),
            srcList = [
                null,
                'A-Saite.mp3',
                'D-Saite.mp3',
                'G-Saite.mp3',
                'B-Saite.mp3'
            ],
            audioIndex = 1,
            timeoutReplay = 200,
            timeoutReplayPause = 600,
            zahlen = [];


        // Array zahlen abspielen
        function replay() {
            if (document.getElementById('Zahlenanzeige').dataset.status !== 'ready') {
                return;
            }

            if (typeof zahlen[audioIndex] !== 'undefined') {
                if (zahlen[audioIndex] === 0) {
                    audioIndex = audioIndex + 1;
                    setTimeout(replay, timeoutReplayPause);
                } else {
                    document.getElementById('Zahlenanzeige').dataset.status = 'playing';
                    audio.onended = null;
                    audio.src = srcList[zahlen[audioIndex]];
                    audio.onended = function () {
                        audioIndex = audioIndex + 1;
                        audio.onended = null;
                        document.getElementById('Zahlenanzeige').dataset.status = 'ready';
                        setTimeout(replay, timeoutReplay);
                    };
                    audio.play();
                }
            } else {
                audioIndex = 0;
                audio.onended = null;
                document.getElementById('Zahlenanzeige').dataset.status = 'ready';
            }
        }

        // Audio abspielen
        function playAudio() {
            document.getElementById('Zahlenanzeige').dataset.status = 'playing';
            audio.onended = null;
            audio.src = srcList[audioIndex];
            audio.onended = function () {
                audioIndex = 0;
                audio.onended = null;
                document.getElementById('Zahlenanzeige').dataset.status = 'ready';
            };
            audio.play();
        }


        // Schalter verarbeiten
        function buttonPress(value) {
            if (document.getElementById('Zahlenanzeige').dataset.status === 'ready') {
                switch (value) {
                case -1:
                    zahlen.pop();
                    document.getElementById("Zahlenanzeige").innerHTML = zahlen.join(' - ');
                    break;
                case 0:
                    audioIndex = value;
                    zahlen.push(value);
                    break;
                case 1:
                case 2:
                case 3:
                case 4:
                    audioIndex = value;
                    zahlen.push(value);
                    playAudio(value);
                    break;
                }
                document.getElementById('Zahlenanzeige').innerHTML = zahlen.join(' - ');
            }
        }


        // Audio Dateien laden
        audio.addEventListener('canplaythrough', preLoadAudio, false);
        function preLoadAudio() {
            if (typeof srcList[audioIndex] !== 'undefined') {
                audio.src = srcList[audioIndex];
                audioIndex = audioIndex + 1;
            } else {
                audioIndex = 0;
                document.getElementById('Zahlenanzeige').innerHTML = '';
                document.getElementById('Zahlenanzeige').dataset.status = 'ready';
                audio.removeEventListener('canplaythrough', preLoadAudio, false);
            }
        }


        // Initialisierung
        function init() {
            document.getElementById('Zahlenanzeige').innerHTML = 'Lade Audiodaten...';
            preLoadAudio();

            document.onkeydown = function(event) {
                var charCode = event.which || event.keyCode;

                switch (charCode) {
                    case 220:
                        buttonPress(0);
                        break;
                    case 49:              // 1
                        buttonPress(1);
                        break;
                    case 50:              // 2
                        buttonPress(2);
                        break;
                    case 51:              // 3
                        buttonPress(3);
                        break;
                    case 52:              // 4
                        buttonPress(4);
                        break;
                    case 32:              // spacebar
                        replay();
                        break;
                    case 46:              // delete
                        buttonPress(-1);
                        break;
                }
            }
       }

        window.onload = init;
    </script>
</head>
<body>
    <h1>Kompositionsaufgabe</h1>
    <br />

    <!-- ANZEIGE ----------------------------------------------------------------------------------------------------------------------->
    <p id="Zahlenanzeige" data-status="loading"></p>
    
    <!-- SCHALTER ---------------------------------------------------------------------------------------------------------------------->
    <button onclick="buttonPress(0)">
        <img src="http://forum.jswelt.de/../Dropbox/Universität/Bachelorarbeit/Programm/Studie%20HTML/Pause.png" alt="Pause" width="150" height="150" />
    </button>
    <button onclick="buttonPress(1)">
        <img src="http://forum.jswelt.de/../Dropbox/Universität/Bachelorarbeit/Programm/Studie%20HTML/Schaltfläche1.png" alt="Schaltfläche 1" width="150" height="150" />
    </button>
    <button onclick="buttonPress(2)">
        <img src="http://forum.jswelt.de/../Dropbox/Universität/Bachelorarbeit/Programm/Studie%20HTML/Schaltfläche2.png" alt="Schaltfläche 2" width="150" height="150" />
    </button>
    <button onclick="buttonPress(3)">
        <img src="http://forum.jswelt.de/../Dropbox/Universität/Bachelorarbeit/Programm/Studie%20HTML/Schaltfläche3.png" alt="Schaltfläche 3" width="150" height="150" />
    </button>
    <button onclick="buttonPress(4)">
        <img src="http://forum.jswelt.de/../Dropbox/Universität/Bachelorarbeit/Programm/Studie%20HTML/Schaltfläche4.png" alt="Schaltfläche 4" width="150" height="150" />
    </button>
    <br />
    <br />
    <button onclick="replay()">
        <img src="http://forum.jswelt.de/../Dropbox/Universität/Bachelorarbeit/Programm/Studie%20HTML/PlayButton.png" height="50" width="50" />
    </button>
    <button onclick="buttonPress(-1)">Löschen</button>
</body>
</html>
 
Prinzipiell sind "sleep"-Funktionen in JS gar keine gute Idee. Da funktioniert JS ganz anders als z.B. C oder PHP, da es denn Browser einfrieren lässt.

Entweder man arbeitet, wie mini gezeigt, mit Events (hier das onended-Event des <audio>-Elements und auf jeden Fall die bessere Wahl) oder mit window.setTimeout().
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben