How do you overlap variables?

Question

I am creating a Launchpad in which an audio file starts/stops when a button is clicked. I have this working, but when I try and add multiple audio files, they refuse to overlap each other correctly. The 2nd audio file will not play when the 1st audio file is playing. Is there a way to get this working? Below is an example of 2 buttons, with 2 separate audio files linked to them. I want to overlap these audio files so that when the project is complete (64 audio files/buttons), users can piece together multiple audio files to create their own unique tracks.

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

How do you overlap variables?

1 Answers