Comment superposez-vous des variables (Audio)?

Question

Je crée un Launchpad dans lequel un fichier audio démarre/s'arrête quand un bouton est cliqué. J'ai ce travail, mais quand j'essaie d'ajouter plusieurs fichiers audio, ils refusent de se chevaucher correctement. Le 2e fichier audio ne sera pas lu lors de la lecture du 1er fichier audio. Y a-t-il un moyen de faire fonctionner ça? Voici un exemple de 2 boutons, avec 2 fichiers audio distincts liés à eux. Je veux chevaucher ces fichiers audio de sorte que lorsque le projet est terminé (64 fichiers audio/boutons), les utilisateurs peuvent assembler plusieurs fichiers audio pour créer leurs propres pistes uniques.

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

Vous devez utiliser deux variables différentes pour votre lecture/pause suivi.

Ici, isPlaying suit votre premier son et isSecondPlaying suit votre deuxième son.

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; 
    } 
} 

MAIS

Si vous voulez faire cela pour 64 fichiers audio, vous voudrez peut-être revoir votre méthode:

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);"/> 

Pour vous initialiser audios , il suffit d'appeler createAudio('yourAudio.wav',1); Et changer la source & ID.