title: How to make an audio file wait for the end of another one in order to start them together
body: <p>I'm trying to build a basic sampler. I have 4 different audio files (1 guitar, 1 drum, 1 piano and 1 bass).  The sound kit buttons programmed the way I want, but I cannot get the loops to work the way I want.</p>
  
  <p>What i want to do is this :</p>
  
  <ul>
  <li>if the user clicks on a button it launches the sample</li>
  <li>if the user clicks again on the same button it stops the sample</li>
  <li>and if the user clicks  on another sample it waits for the end of the first sample and then start together   </li>
  </ul>
  
  <p>For now i manage to do the first and the second steps but i can't figure how to do the third one.</p>
  
  <p>I tried to use Event Listener to know when a loop ends but i've never managed to make it work.</p>
  
  <p>So my question is : is there an easy to do this third step ?
  If you could give me a bit more detail when explaining, that would be great. Thanks!</p>
  
  <p>Here what's my js look like so far :</p>
  
  <pre><code>$(document).ready(function() {
    var basse = {
      padOne:  new Audio('basse2.mp3'),
    };
  
    var drum = {
      padOne: new Audio('m1_drum1_85.mp3'),
    };
  
    var guitar = {
      padOne: new Audio('m1_guitare1_85.mp3'),
    };
  
    var piano = {
      padOne: new Audio('m1_piano_85.mp3'),
    };
  
    $('.pad-1').mousedown(function() {
      if (basse.padOne.paused) {
        basse.padOne.load()
        basse.padOne.loop = true;
        basse.padOne.play();
      } else {
        basse.padOne.pause();
        basse.padOne.currentTime = 0
      }
    });
  
    $('.pad-5').mousedown(function() {
      if (drum.padOne.paused) {
        drum.padOne.load()
        drum.padOne.loop = true;
        drum.padOne.play();
      } else {
        drum.padOne.pause();
        drum.padOne.currentTime = 0
      }
    });
  
    $('.pad-9').mousedown(function() {
      if (guitar.padOne.paused) {
        guitar.padOne.load()
        guitar.padOne.loop = true ;
        guitar.padOne.play();
      } else {
        guitar.padOne.pause();
        guitar.padOne.currentTime = 0
      }
    });
  
    $('.pad-13').mousedown(function() {
      if (piano.padOne.paused) {
        piano.padOne.load()
        piano.padOne.loop = true ;
        guitar.padOne.play();
      } else {
        piano.padOne.pause();
        piano.padOne.currentTime = 0
      }
    });
  });
  </code></pre>