Wie spiele ich mehrere randomisierte Audiodatein nacheinander ab?

Question

Hallo zusammen,
ich habe folgende Schwierigkeit:

Es sollen vier randomisierte Audiodatein nacheinander auf einer Seite abgespielt werden.

Als erstes lasse ich von einer Urne vier Zettel (Position)gleichverteilt mit je vier Möglichkeiten ziehen.

Danach folgt der Code:

`#Position 2
if (value('Ipos2') == 2) {
text('OT2'); 
} 
if (value('Ipos2') == 3) {
text('OT3');;
} 
if (value('Ipos2') == 4) {
text('OT4'); 
} 
if (value('Ipos2') == 5) {
text('OT5'); 
}

#Position 3
if (value('Ipos3') == 2) {
text('OT2'); 
} 
if (value('Ipos3') == 3) {
text('OT3');;
} 
if (value('Ipos3') == 4) {
text('OT4'); 
} 
if (value('Ipos3') == 5) {
text('OT5'); 
}

#Position 4
if (value('Ipos4') == 2) {
text('OT2'); 
} 
if (value('Ipos4') == 3) {
text('OT3');;
} 
if (value('Ipos4') == 4) {
text('OT4'); 
} 
if (value('Ipos4') == 5) {
text('OT5'); 
}

#Position 5
if (value('Ipos5') == 2) {
text('OT2'); 
} 
if (value('Ipos5') == 3) {
text('OT3');;
} 
if (value('Ipos5') == 4) {
text('OT4'); 
} 
if (value('Ipos5') == 5) {
text('OT5'); 
}`

Die Audiodatein sind als Textbausteine eingebunden. Bsp.:

`<audio id="audio_with_controls" preload="auto" autoplay controlsList="nodownload">
  <source src="OT2.mp3" type="audio/mpeg" />
  Ihr Browser kann diese Audio-Datei leider nicht abspielen
</audio>`

Nach aktuellem Stand beginnen die Audiodatein leider alle gleichzeitig abzuspielen.

Unter Mediendateien im Fragebogen (Audio, Video, Dokumente) ist die Rede von audio.addEventListener("ended", SoSciTools.submitPage); mit Hilfe von JavaScript. Wie wäre der Code für eine "Pause" nach jeder if Auswahl, so dass z.B. auf die Audiodatei aus Position 2 die Audiodatei aus Position 3 folgt usw.?

Vielen lieben Dank!

Answer 1

Nach aktuellem Stand beginnen die Audiodatein leider alle gleichzeitig abzuspielen.

Ja, dafür sorgt das "autoplay" in Ihrem HTML-Code.

Wenn Sie das Abspielen zeitlich koordinieren möchten, kommen Sie - wie Sie ja schon schreiben - nicht um JavaScript umhin.

Es wird aber noch komplizierter. Und zwar muss der JavaScript-Code ja auch noch erfahren, in welcher Reihenfolge die Audio-Dateien auf der Seite stehen. Ich würde dafür mit der Funktion document.getElementsByTagName("audio") arbeiten, um alle in der richtigen Abfolge zu bekommen.

Und dann müssten Sie an das erste Element (das Sie nun ja haben) den schon von Ihnen angesprochenen "ended" Event-Handler hängen. Dieser muss aber die zweite Audio-Datei starten, statt mit der nächsten Seite fortzufahren. Das köntne dann so aussehen:

var audios = document.getElementsByTagName("audio");
audios[0].addEventListener("ended", function() {
  audios[1].play();
});

Das ist jetzt noch nicht elegant, aber vom Prinzip her...

Und noch eine Warnung: Es kann durchaus sein, dass der ein oder andere Browser das Abspielen blockiert.

Eventuell ist es zuverlässiger, wenn Sie 4x3x2 = 24 Audio-Dateien erstellen, in welchen Sie die Audio-Dateien selbst jeweils zu einer verknüpfen. Dann müssen Sie nur noch 1 aus 24 Dateien ziehen und diese einfach komplett abspielen.

Auch nicht elegant, aber nochmal ein bisschen weniger komplex und damit zuverlässiger.

Comments

Vielen Dank für die schnelle Antwort!