app/src/components/MusicPlayer.tsx

@@ -1,52 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import styles from '../styles/Background.module.css';
-
-const MusicPlayer = ({ onReady }: { onReady: (unmute: () => void) => void }) => {
-  const [isMuted, setIsMuted] = useState(false);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  const play = useCallback(() => {
-    if (audioRef.current) {
-      audioRef.current.play().catch(error => console.log("Audio play failed:", error));
-    }
-  }, []);
-
-  const unmute = useCallback(() => {
-    if (audioRef.current) {
-      audioRef.current.muted = false;
-      setIsMuted(false);
-      play();
-    }
-  }, [play]);
-
-  useEffect(() => {
-    if (audioRef.current) {
-      audioRef.current.volume = 0.5;
-      audioRef.current.loop = true;
-      audioRef.current.muted = true;
-      play();
-      onReady(unmute);
-    }
-  }, [play, onReady, unmute]);
-
-  const toggleMute = () => {
-    if (audioRef.current) {
-      audioRef.current.muted = !isMuted;
-      setIsMuted(!isMuted);
-      if (!isMuted) {
-        play();
-      }
-    }
-  };
-
-  return (
-    <>
-      <audio ref={audioRef} src="https://olive-fashionable-swallow-983.mypinata.cloud/ipfs/QmT74A6AVYTXywz7SGGuvqSqgoidV2SDCn9jGW5KEiRYtR" />
-      <button onClick={toggleMute} className={styles.musicButton}>
-        {isMuted ? '🔇' : '🔊'}
-      </button>
-    </>
-  );
-};
-
-export default MusicPlayer;

app/src/components/Scene.tsx

@@ -1,19 +1,10 @@
-import React, { useCallback } from "react"
+import React from "react"
 import styles from '../styles/Background.module.css';
 import Tower from "./Tower";
 import Army from "./Army";
 import MarchingBand from "./MarchingBand";
-import MusicPlayer from "./MusicPlayer";
-import { usePlayer } from "../providers/PlayerProvider";
 
 const Scene = () => {
-  const { isRegistered } = usePlayer();
-  const handleMusicReady = useCallback((unmute: () => void) => {
-    if (isRegistered) {
-      unmute();
-    }
-  }, [isRegistered]);
-
   return <div className={styles.frame}>
     <div className={`${styles.air} ${styles.background_asset}`} />
     <div className={`${styles.clouds_small} ${styles.background_asset}`} />
@@ -24,7 +15,6 @@ const Scene = () => {
     <MarchingBand />
     <div className={`${styles.bonfire} ${styles.background_asset}`} />
     <Army />
-    <MusicPlayer onReady={handleMusicReady} />
   </div>
 }
 

app/src/styles/Background.module.css

@@ -113,18 +113,6 @@
     bonfire 12s linear infinite,
     bonfire_skew 5s infinite linear;
 }
-.musicButton {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  border: none;
-  padding: 10px;
-  border-radius: 5px;
-  cursor: pointer;
-  z-index: 1000;
-}
 @keyframes scrollBackground {
   0% {
     background-position: 0 0;