どのように変数（オーディオ）を重ねるのですか？

Question

私は、ボタンをクリックするとオーディオファイルが開始/停止するLaunchpadを作成しています。私はこれが働いているが、複数のオーディオファイルを追加しようとすると、互いに重なり合うことを拒否します。第1オーディオファイルが再生されているときは、第2オーディオファイルは再生されません。これを稼働させる方法はありますか？以下は2つのボタンの例で、2つの別々のオーディオファイルがリンクされています。これらのオーディオファイルを重ねて、プロジェクトが完成したら（64オーディオファイル/ボタン）、複数のオーディオファイルをまとめて独自のトラックを作成することができます。

JS：

var one = new Audio(); one.src = "files/audio/one.wav"; one.loop = true; 

var two = new Audio(); two.src = "files/audio/two.wav"; two.loop = true; 

var isPlaying = false; 

function manage1(){ 
    if(isPlaying){ 
    one.pause(); 
    isPlaying = false; 
     one.currentTime = 0; 
    } 
    else{ 
    one.play(); 
    isPlaying = true; 
     one.currentTime = 0; 
    } 
} 

function manage2(){ 
    if(isPlaying){ 
    two.pause(); 
    isPlaying = false; 
     two.currentTime = 0; 
    } 
    else{ 
    two.play(); 
    isPlaying = true; 
     two.currentTime = 0; 
    } 
} 

HTML：

<img class="item" src="files/button.png" onclick="manage1();"/> 

<img class="item" src="files/button.png" onclick="manage2();"/> 

Answer 1

あなたは、再生/一時停止トラッカーのための2つの異なる変数を使用する必要があります。

ここでは、isPlayingは最初のオーディオを、isSecondPlayingは2番目のオーディオをトラッキングします。

var one = new Audio(); one.src = "files/audio/one.wav"; one.loop = true; 

var two = new Audio(); two.src = "files/audio/two.wav"; two.loop = true; 

var isPlaying = false; 
var isSecondPlaying = false; 

function manage1(){ 
    if(isPlaying){ 
    one.pause(); 
    isPlaying = false; 
     one.currentTime = 0; 
    } 
    else{ 
    one.play(); 
    isPlaying = true; 
     one.currentTime = 0; 
    } 
} 

function manage2(){ 
    if(isSecondPlaying){ 
    two.pause(); 
    isSecondPlaying = false; 
     two.currentTime = 0; 
    } 
    else{ 
    two.play(); 
    isSecondPlaying = true; 
     two.currentTime = 0; 
    } 
} 

しかし

あなたは64個のオーディオファイルのためにこれをしたい場合、あなたはあなたの方法を再考する必要があります

var audio = []; 
var isPlaying = []; 

function manage(id){ 
    if(isPlaying[id]){ 
    audio[id].pause(); 
    isPlaying[id] = false; 
    audio[id].currentTime = 0; 
    } 
    else{ 
    audio[id].play(); 
    isPlaying[id] = true; 
    audio[id].currentTime = 0; 
    } 
} 

function createAudio(src,i){ 
    audio[i] = new Audio(); 
    audio[i].src = src; 
    audio[i].loop = true; 
    isPlaying[i] = false; 
} 

var mySources = ['path/to/1.wav','path/to/2.wav','path/to/3.wav','path/to/4.wav','path/to/5.wav']; 

for(var i = 1;i<=mySources.length;i++){ 
    createAudio(mySources[i-1],i); 
} 

HTML

<img class="item" src="files/button.png" onclick="manage(1);"/> 
<img class="item" src="files/button.png" onclick="manage(2);"/> 
<img class="item" src="files/button.png" onclick="manage(3);"/> 
<img class="item" src="files/button.png" onclick="manage(4);"/> 
<img class="item" src="files/button.png" onclick="manage(5);"/> 

あなたを初期化するにはちょうどcreateAudio('yourAudio.wav',1); を呼び出して、ソース& IDを変更してください。