I want the music to continue playing as I switch pages(tabs). Next.js

Question

I want to make music player in next.js application. How do I prevent the playing track from stopping when switching between pages? In short, I want the music to continue playing as I switch pages(tabs).

My code is here;

import React, { useState, useEffect } from "react";

const useAudio = url => {

    const [audio, setAuido]: any = useState();
    const [playing, setPlaying] = useState(false);

    const toggle: any = () => setPlaying(!playing);
    useEffect(() => {
        if (typeof window !== 'undefined') {
            setAuido(new Audio(url))
        }

    }, [])

    useEffect(() => {
        if (audio !== undefined) {
            playing ? audio.play() : audio.pause();
        }

    }, [playing]);

    useEffect(() => {
        if (audio === undefined) {
            return;
        }
        audio.addEventListener('ended', () => setPlaying(false));
        return () => {
            audio.removeEventListener('ended', () => setPlaying(false));
        };
    }, [audio]);

    return [playing, toggle];
};

const Player = ({ url }) => {
    const [playing, toggle] = useAudio(url);

    return (
        <div>
            <button onClick={toggle}>{playing ? "Pause" : "Play"}</button>
            {/* <audio controls autoPlay={playing}>
                <source src="/sound/sound.mp3" type="audio/mpeg" />
            </audio> */}
        </div>
    );
};

export default Player;

Answer 1

You can determine your player in place where routing your project. In that class your player not stop when changing route

Answer 2

try using window.focus() in useEffect function