/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

20 votes204 views4 answers
On enter key press react
Javascript React
0 vote203 views2 answers
React import image with url
Javascript React
7 votes261 views2 answers
Pass props in react
Javascript React
4 votes203 views2 answers
Change the route on button click react
Javascript React
0 vote147 views1 answer
How to define cardTitle background image in mdl in reactjs
Javascript React
2 votes150 views1 answer
Range slider mui can't slide
Javascript React
0 vote194 views1 answer
How to disable RectButton from react-native-gesture-handler
Javascript React
0 vote232 views2 answers
How to run react builed version
Javascript React
0 vote300 views1 answer
Reset navigation to specific tab react-navigation
Javascript React
0 vote190 views1 answer
Using shortid in react lists
Javascript React