Audio overlapping after audio is stop/pause and then plays

[rolandlee0308]

For our application, we have a click and play feature for the user to play selected chords/arpeggios (sound.play() inside of setTimeout). As for code structure, we stop all sounds before playing the audio. The issue that we encountered is that when the user selects another chord while the current chord is being played, the previous chord continues to play on top of the next chord. What we desire is to cut off all sounds and only play the chord that was last selected (so there's no overlapping audio).

  function arpeggios(
    chordMidiNumbers: Array<number>,
    i: number,
    length: number
  ) {
    setTimeout(() => {
      sound.play(chordMidiNumbers[i].toString());
      i++;
      if (i < length) arpeggios(chordMidiNumbers, i, length);
    }, 1500);
  }

Any help will be much appreciated.

[rolandlee0308]

We solved the issue by calling clearTimeout when a click event occurs.

First, we reformated arpeggios function as below (Note: playArp is a global variable (default is []) that holds setTimeout functions)

   function arpeggios(
    chordMidiNumbers: Array<number>,
    i: number,
    length: number
  ) {
    const temp = setTimeout(() => {
      sound.play(chordMidiNumbers[i].toString());
      i++;
      if (i < length) arpeggios(chordMidiNumbers, i, length);
    }, 1500);
    playArp.push(temp);
  }

Then, we call clearArp function when a click event happens (stop all playing sounds then play the selected chord):

  function clearArp() {
    for (const item of playArp) {
      clearTimeout(item);
    }
    playArp = [];
  }

const clickPlay = (e: any) => {
      stop();  //sound.stop();
      clearArp();
      . . .