stopping audio when switching pages with react router

Question

I have the code below that plays or pauses audio within a function of react. Currently, the audio plays even when I navigate to other pages like /manage or /upload. However, I want the audio to completely stop when I navigate to other pages.

How can I do this?

codde:

  const [playing, setPlaying] = useState(false);
  const [playingAudio, setPlayingAudio] = useState([]);
  
  const location = useLocation();

  const handleAudioPlay = (customer_id, sound_id, state) => {
    

    var data = {
      "current-user": location.state.customer_id || props.customer_id,
      "customer-id": customer_id,
      "sound-id": sound_id
    };
    
    /*
    if(state) {
      axios.post(`http://localhost:2000/files/get-temporary-url`, data).then(function(result) {
        var audio = new Audio(result.data)
        audio.crossOrigin = 'anonymous';
        setPlayingAudio(audio)
        if(playing) {
          audio.pause()
        }
        else {
          audio.play()
          setPlaying(true)
          audio.addEventListener('ended', function() {
            setPlaying(false)
            }, false);
        }
      });;
    */
    
    
    if(state) {
      axios.post(`/files/get-temporary-url`, data).then(function(result) {
        var audio = new Audio(result.data)
        audio.crossOrigin = "anonymous";
        setPlayingAudio(audio)
        if(playing) {
          audio.pause()
        }
        else {
          audio.play()
          setPlaying(true)
          audio.addEventListener('ended', function() {
            setPlaying(false)
            }, false);
        }
      });;
    
    }
    else {
      playingAudio.pause()
      setPlaying(false)
    }
  
  }

Have you tried using an `useEffect` hook cleanup function to stop any audio players and remove any event listeners when the component unmounts? — Drew Reese, Jan 20 '22 at 06:05

score 1 · Answer 1 · answered Jan 20 '22 at 07:05

1

I think you could use an useEffect hook to pause the audio and unsubscribe any event listeners when the component unmounts.

Use a mounting useEffect hook that returns a cleanup function to be run when the component unmounts.

Example:

const [playing, setPlaying] = useState(false);
const [playingAudio, setPlayingAudio] = useState([]);

const location = useLocation();

const handldEnded = () => setPlaying(false);

const handleAudioPlay = (customer_id, sound_id, state) => {
  const data = {
    "current-user": location.state.customer_id || props.customer_id,
    "customer-id": customer_id,
    "sound-id": sound_id
  };

  if (state) {
    axios.post(`/files/get-temporary-url`, data).then(function(result) {
      const audio = new Audio(result.data);
      audio.crossOrigin = "anonymous";
      setPlayingAudio(audio);
      if (playing) {
        audio.pause();
      } else {
        audio.play();
        setPlaying(true);
        audio.addEventListener('ended', handldEnded, false);
      }
    });
  } else {
    playingAudio.pause();
    setPlaying(false);
  }
};

useEffect(() => {
  return () => {
    playingAudio.removeEventListener("ended", handldEnded, false);
    playingAudio.pause();
  };
}, []);

answered Jan 20 '22 at 07:05

Drew Reese

165,259
14
153
181

i put a console log in the return, it never hits it – Jason G Dec 08 '22 at 03:31
looks like it's because i'm navigating to the same page - with a different item id - which then it grabs from the server. all of my state objects are also still present and still have the old value from the old page. – Jason G Dec 08 '22 at 03:50
@JasonG Is this the page/state you referred to [here](https://stackoverflow.com/questions/70615574/redirect-with-usenavigate-and-state-seems-to-be-hard-to-accomplish/70615616?noredirect=1#comment131885243_70615616) in a comment? It sounds like you have an audio stream with a dependency on some route path parameter, yes? You might be better served creating a new post for your specific issue/question. Feel free to ping me in a comment here and I can take a look when available. – Drew Reese Dec 08 '22 at 05:37
no, it's the normal behavior of navigate - it keeps the state because it doesn't unmount. I just listened to navigate and manually reset the values. – Jason G Dec 09 '22 at 15:14
@JasonG I understand it's the normal behavior, and that's why I hinted you may need to implement a `useEffect` hook with a dependency on the part of the URL path with a *different* id to issue a side-effect to update/reset any local component state. Based on your comment it sounds like we're *basically* saying the same thing. Has your question been answered then? – Drew Reese Dec 09 '22 at 17:53
yes, that's also a good idea to use the ID instead of navigate, i might change this to make it cleaner. thanks – Jason G Dec 09 '22 at 23:59

stopping audio when switching pages with react router

1 Answers1