/Javascript/React/Stop playing music when page is closed react

Stop playing music when page is closed react

import React, { useRef, useEffect } from 'react';
import waves from '../audio/waves.mp3';
    
const RockyCoast = (props) => {
    // the audio variable needs to be stored in a ref in order to access it across renders
    let audio = useRef();
    // start the audio (using the .current property of the ref we just created) when the component mounts using the useEffect hook
    useEffect(() => {
        audio.current = new Audio(waves)
        audio.current.play()
    }, [])
    // Stop the audio when the component unmounts
    // (not exactly what you asked re React Router, but similar idea)
    useEffect(() => {
        return () => {
            audio.current.pause()
            console.log("in cleanup")
        }
    }, [])
    ...

    return (
        <>
            ...
        </>
    )
}
export default RockyCoast;

Source: stackoverflow.com

Similar codes

97 votes130 views8 answers
Create react app
Javascript React
-2 votes137 views1 answer
Reactjs cut part of string
Javascript React
0 vote134 views1 answer
Open screen pdf on google drive react native expo
Javascript React
16 votes135 views3 answers
What does the useReducer do in react
Javascript React
1 vote123 views1 answer
Retour a la ligne <p> react
Javascript React
0 vote126 views1 answer
React tutorial componentDidMount() componentWillUnmount()
Javascript React
0 vote122 views1 answer
React testing for links
Javascript React
1 vote123 views2 answers
React state not updating immediately
Javascript React
0 vote137 views1 answer
Namespace react has no export member FC
Javascript React
0 vote123 views1 answer
React-leaflet/core/cjs/pane.js:7%20error15-Jun-2021%2000:45:06%20%20%20%20%20%20const%20pane%20=%20props.pane%20??%20context.pane;
Javascript React