Play klingt nacheinander mit Schleife

Question

Ich habe vier Audios. Sagen wir s1, s2, s3 und s4. Ich habe auch eine Variable mit zufälligen ganzen Zahlen zwischen eins und vier, zum Beispiel myVar = [2, 1, 3, 4]. Es kann länger oder kürzer als vier sein, aber die ganzen Zahlen sind immer zwischen eins und vier.

Ich möchte einen Zyklus machen, der auf myVar aussehen wird und meine Sounds in der entsprechenden Reihenfolge (in diesem Fall: s2, s1, s3, s4) spielen. Ein Ton nach dem anderen, das ist sehr wichtig. Nicht alles auf einmal.

Alle meine Lösungen spielen die Sounds auf einmal so weit. Ich weiß, dass es einige ähnliche Fragen gibt, aber ich bin so schlecht in JavaScript, dass ich die Antworten nicht verwenden konnte. Jeder weiß, wie es geht?

Einer aktuellen Lösungen (funktioniert nicht):

function recTime (i) { 

    if (i === myVar.length) return; 

    if (myVar[i] === 1) { 
    setTimeout(function() { 
     s1.play(); 
     return recTime(++i); 
    },350);} 
    else if (myVar[i] === 2) { 
    setTimeout(function() { 
     s2.play(); 
     return recTime(++i); 
    },350); 
    } 
    else if (myVar[i] === 3) { 
    setTimeout(function() { 
     s3.play(); 
     return recTime(++i); 
    },350); 
    } 
    else if (myVar[i] === 4) { 
    setTimeout(function() { 
     s4.play(); 
     return recTime(i++); 
    },350); 
    } 
    } 

I call it in this cycle: 

    for (var i = 0; i < stimuli.length+1; ++i){ 
    recTime(i); 
    } 

Answer 1

Es kann auch eine Lösung ohne Mutation von 'Ordnung' Array, beispielsweise mit Symbol.iterator für jedes Ereignis aufgerufen ended:

var a1 = new Audio('http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg'); a1.id = "1"; // id helps to see console.log is fine 
 
var a2 = new Audio('http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg'); a2.id = "2"; 
 
var a3 = new Audio('http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg'); a3.id = "3"; 
 
var a4 = new Audio('http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg'); a4.id = "4"; 
 

 
var order = [2, 1, 4, 3, 2, 1]; 
 

 
rotateAudio(order); // main function; pass order array here 
 

 
function rotateAudio(order) { 
 
    var orderMap = {1: a1, 2: a2, 3: a3, 4: a4}; 
 
    var iterator = order[Symbol.iterator](); 
 
    var value, done; 
 
    
 
    function rotate({value, done}) { // get next iteration 
 
    function next(e) { 
 
     e.target.removeEventListener('ended', next); // helps for garbage removal I guess 
 
     rotate(iterator.next()) 
 
    }; 
 
    if (done) { console.log('done!'); return }; 
 
    var current = orderMap[value]; 
 
    console.log('current: ', current); 
 
    current.play(); 
 
    current.addEventListener('ended', next) // listen to 'ended' on audio, start next one 
 
    } 
 
    
 
    rotate(iterator.next()); // first call 
 
}

Answer 2

Verwendung onended Ereignis das nächste Lied, um so etwas zu spielen:

var musics = ['s1', 's2', 's3', 's4']; 
var order = [2,1,3,4]; 
var player; //get your audio tag here 
player.autoplay = true; 

function playNext() { 
    var current = order.shift(); 
    player.src = current; 
} 

player.addEventListener('ended', playNext); 
playNext();