ループを順番に再生する

Question

私は4つのオーディオを持っています。 s1、s2、s3、s4としましょう。また、1と4の間のランダムな整数を持つ変数、たとえばmyVar = [2,1,3,4]もあります。それは4より長くても短くても構いませんが、整数は常に1と4の間にあります。

私はmyVarを見て、それに対応する順番で音を出すサイクルを作りたいと思います（この場合は：s2、s1、s3、s4）。ひとつひとつの音、それはとても重要です。一度にすべてではありません。

私のすべてのソリューションはこれまで一度に音を再生します。私はいくつか似たような質問があることを知っていますが、JavaScriptで私は答えを使うことができませんでした。誰もそれを行う方法を知っていますか？

現在の解決策の一つに（動作しない）：次の曲、このような何か演奏する

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

をもの突然変異のない解決策がある場合もあります例えば、endedイベントごとに呼び出されるSymbol.iteratorを使用する「順序」配列：

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

使用onendedイベント：

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();