/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 vote143 views1 answer
React native icon onpress remove highlight onpress
Javascript React
19 votes141 views6 answers
React native build android apk
Javascript React
16 votes150 views1 answer
DangerouslySetInnerHTML did not match error in React
Javascript React
0 vote144 views1 answer
React native fade in fade out animation
Javascript React
0 vote144 views1 answer
React redux open another page
Javascript React
5 votes198 views1 answer
Deploy react js heroku
Javascript React
2 votes167 views1 answer
Remove header border react native
Javascript React
0 vote151 views1 answer
Flutter or react native
Javascript React
17 votes134 views5 answers
Add background image react native
Javascript React
18 votes161 views6 answers
Export apk react native
Javascript React