/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

1 vote212 views1 answer
How to get the value of textarea in react
Javascript React
0 vote158 views1 answer
Integrate my own google pay using react js
Javascript React
0 vote240 views1 answer
How to add abutton component to drawer in react native
Javascript React
-1 vote220 views1 answer
React native list view
Javascript React
1 vote204 views3 answers
[PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Javascript React
6 votes212 views2 answers
Export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'
Javascript React
4 votes215 views3 answers
Reactjs date format dd/mm/yyyy
Javascript React
0 vote208 views1 answer
React JSON data to display in a table
Javascript React
0 vote234 views1 answer
Outline none react native web
Javascript React
7 votes236 views2 answers
Import a script to my react componetn
Javascript React