/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

0 vote326 views1 answer
Javascript slider get value react
Javascript React
108 votes356 views1 answer
How to start react app in windows
Javascript React
2 votes338 views1 answer
React dynamic import
Javascript React
0 vote342 views1 answer
React router route not found redirect
Javascript React
9 votes328 views2 answers
Android center text react native
Javascript React
8 votes329 views3 answers
Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Javascript React
0 vote317 views1 answer
ERROR in ./node_modules/react-icons/all.js 4:0-22
Javascript React
0 vote324 views1 answer
React native set default ios simulator
Javascript React
41 votes323 views5 answers
UseRef() in react
Javascript React
0 vote324 views1 answer
What was the reaction of others bostonh tea party
Javascript React