остановка звука при переходе на другие страницы

#javascript #reactjs #audio #react-hooks #navigation

Вопрос:

У меня есть код ниже, который воспроизводит звук нажатием кнопки в react. Код работает, но когда я перехожу на разные страницы своей веб-страницы, звук все еще воспроизводится. Есть ли какой-либо метод или трюк, который я могу реализовать, чтобы заглушить все звуки или приостановить звук при выходе со страницы? Мой код:

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

 const handleAudioPlay = (customer_id, sound_id, state) => {
 
 var data = {
 "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)
 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)
          setPlayingAudio(audio)
          if(playing) {
            audio.pause()
          }
          else {
            audio.play()
            setPlaying(true)
            audio.addEventListener('ended', function() {
              setPlaying(false)
              }, false);
          }
        });;
      */
    }
 else {
 playingAudio.pause()
 setPlaying(false)
    }
 
  }