add background music

app/src/components/MusicPlayer.tsx

@@ -0,0 +1,52 @@
+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,10 +1,19 @@
-import React from "react"
+import React, { useCallback } 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}`} />
@@ -15,6 +24,7 @@ const Scene = () => {
     <MarchingBand />
     <div className={`${styles.bonfire} ${styles.background_asset}`} />
     <Army />
+    <MusicPlayer onReady={handleMusicReady} />
   </div>
 }
 

app/src/styles/Background.module.css

@@ -113,6 +113,18 @@
     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;