javascript - 转到不同页面时停止音频

Question

我有下面的代码，可以通过单击按钮来播放音频。该代码有效，但是当我转到网页中的不同页面时，音频仍在播放。离开页面时，我可以实施任何方法或技巧来使所有声音静音或暂停声音吗？我的代码：

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

标签： javascriptreactjsaudioreact-hooksnavigation