Tengo el siguiente código que reproduce o pausa el audio dentro de una función de reacción. Actualmente, el audio se reproduce incluso cuando navego a otras páginas como /manage o /upload. Sin embargo, quiero que el audio se detenga por completo cuando navego a otras páginas.
¿Cómo puedo hacer esto?
código:
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) } }Creo que podría usar un gancho useEffect para pausar el audio y cancelar la suscripción de cualquier oyente de eventos cuando el componente se desmonte.
Use un useEffect de montaje que devuelva una función de limpieza para que se ejecute cuando se desmonte el componente.
Ejemplo:
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(); }; }, []);