オーディオファイルの配列を再生する

Question

ボタンをクリックするたびに再生したいオーディオファイルの配列があります。このボタンをクリックすると、配列内の次のオーディオファイルが再生されます。また、ユーザーが再度クリックしたときにオーディオが現在再生されている場合は、現在のトラックがリセットされ、次の曲が再生されます。

私は現在持っているアレイを循環できない理由を理解しようとしています。

var song1 = $("#sound-1"); 
var song2 = $("#sound-2"); 
var song3 = $("#sound-3"); 
var song4 = $("#sound-4"); 
var song5 = $("#sound-5"); 
var song6 = $("#sound-6"); 
var song7 = $("#sound-7"); 
var song8 = $("#sound-8"); 

var audioArray = [ song1, song2, song3, song4, song5, song6, song7, song8 ]; 


$(".click").click(function(){ 
    var i=0; 
     if (i< audioArray.length){ 
     audioArray[i].trigger('play'); 
     i++; 
     } else if (i>audioArray.length){ 
     i = 0; 
     audioArray[i].trigger('play'); 
     }; 
}); 

Answer 1

更新答：あなたはネイティブHTML5のインタフェースを使用しているので

、同様にトリガすることができpauseイベントがあります。残念ながら、時刻をリセットするイベントはstopではありませんが、currentTimeプロパティを使用して手動で0に設定することができます。

var i=0; 
var lastPlayedFile = null; 
$(".click").click(function(){ 
    if(lastPlayedFile !== null) { 
    lastPlayedFile[0].currentTime = 0; // [0] because we need a native DOM element, not a jQuery-wrapped one 
    lastPlayedFile.trigger('pause'); 
    } 
    if (i< audioArray.length){ 
    lastPlayedFile = audioArray[i]; 
    audioArray[i].trigger('play'); 
    i++; 
    } else if (i>=audioArray.length){ // there was a missing '=' in this condition to work properly 
    i = 0; 
    lastPlayedFile = audioArray[0]; 
    audioArray[i].trigger('play'); 
    }; 
}); 

• Here is a fiddle I created.私はChromeでそれをテストしてみたし、それが完璧に動作します。
• looking at the audio tag referenceは、ネイティブDOMオーディオ要素を操作することで何が達成できるかを確認することをお勧めします。

---

オリジナルの答え：clickハンドラ外iの

移動宣言。

var i=0; 
$(".click").click(function(){ 
    if (i< audioArray.length){ 
    audioArray[i].trigger('play'); 
    i++; 
    } else if (i>audioArray.length){ 
    i = 0; 
    audioArray[i].trigger('play'); 
    }; 
}); 

あなたは0にそれが価値だユーザーがボタンをクリックするたびにリセットされました。