Howler keeps playing the audio, even after pause

[vp5h]

I have made a app, where a component has a audio and caption of the audio, I show a list of audios on one side and render the selected on the other, I am using howler with react.

Issue, I am facing is, I am not able to pause Audio from return function inside useEffect. I am able to unload the audio if use unload method instead of pause.

also, If is there a way to get updated list of howler audio ID which I can put up on a state and use those ids to use the old audio Id itself rather than creating a new one on every selection.

[besmelh]

Hello, I was wondering if you found a solution to your problem that you can share, as I am running into a similar problem.

I'm using howler with React as well, but after I run sound.play() I can't run any further actions on sound. For example, after I run sound.play(), when I run sound.isplaying() I get false, and when I try sound.pause() it won't pause. Below I've attached a snippet of my code as well.

Note: I've tried modifying my code to run the sound variable with and without the ID, but neither has worked.

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

[pravesh-prod]

I did not, I am still using the unload feature and load up a new instance on every change of audio

[krish-1010]

If you are unloading how do you use the seek functionality? By the way they suggest us to declare the new howl outside the function globally to get the pause working

[pravesh-prod]

after loading a new instance you seek it back to the point where the last unloaded and was seeked to. by holding that value between unloads