Integrated the MusicProvider into the Root.jsx layout

client/src/common/layouts/Root/Root.jsx

@@ -6,6 +6,7 @@ import Background from "@/common/components/Background";
 import {socket} from "@/common/utils/socket.js";
 import {useEffect} from "react";
 import {GroupProvider} from "@/common/contexts/GroupContext.jsx";
+import {MusicProvider} from "@/common/contexts/MusicContext.jsx";
 
 export const Root = () => {
     const outlet = useOutlet();
@@ -19,8 +20,9 @@ export const Root = () => {
     }, []);
 
     return (
+        <MusicProvider>
             <div className="root">
-            <Header />
+                <Header/>
 
                 <main>
                     <GroupProvider>
@@ -28,10 +30,11 @@ export const Root = () => {
                     </GroupProvider>
                 </main>
 
-            <Footer />
+                <Footer/>
 
-            <Background />
+                <Background/>
 
             </div>
+        </MusicProvider>
     );
 }