How to disable multiple sounds during audio streaming?

[hafsamubarak]

I have this simple Howler function that is called on click on play button in my App:
const soundPlay = (src) => {
const sound = new Howl({
src,
format: ["mp3"],
});
sound.play();
};
My issue is: when I click on the play button multiple times then I have multiple sounds streaming at the same time
My question is how to play ONLY one streaming audio on click until it finishes then it can be played again on another click?

[besmelh]

Hello, the way I wrote my code to achieve this is to save the ID of the newly played audio, and make sure that no additional sound instances are created.

I'm using react, and have written my code like so, but unfortunately, I'm running into an issue where I cannot pause the audio. So I'm not sure if this is the right way to go around it.

const street = './city-traffic.mp3';
var streetSound = new Howl({
    src: [street],
    loop: true,
  });

 const [isStreetActive, setIsStreetActive] = useState(false);
  const [id1, setId1] = useState(null);


  // toggle button to play and pause the audio
  function streetButton() {
    // play audio
    if (isStreetActive === false) {
      setIsStreetActive(true);
      // create a single audio instance and register it's ID for later reference
      if (id1 === null) {
        setId1(sound.play());
      }
    }

   //pause audio
    else if (isStreetActive === true) {
      setIsStreetActive(false);
      if (sound.playing(id1)) {
        sound.pause(id1);
      }
    }
  }