did you add the music?

index.html

@@ -211,10 +211,24 @@
                 <div class="w-3 h-3 rounded-full bg-red-500"></div>
                 <span>C: Camera Mode</span>
             </div>
+            <div class="flex items-center space-x-2">
+                <div class="w-3 h-3 rounded-full bg-pink-500"></div>
+                <span>M: Toggle Music</span>
+            </div>
         </div>
         <div class="absolute top-4 right-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
             <div class="text-white font-semibold">Camera: <span id="camera-mode-display">Follow</span></div>
         </div>
+        
+        <!-- Music Toggle Button -->
+        <div class="absolute top-4 left-4 bg-gray-800 bg-opacity-70 p-3 rounded-lg music-toggle-container">
+            <button id="music-toggle" class="flex items-center space-x-2 text-white hover:text-gray-300 transition-colors">
+                <svg id="music-icon" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+                </svg>
+                <span id="music-status" class="text-sm font-semibold">Music: On</span>
+            </button>
+        </div>
     </div>
 <!-- Dialog Box -->
     <div id="dialog-box" class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 p-6 rounded-t-2xl transform translate-y-full transition-all duration-300 z-50 max-w-4xl mx-auto">
@@ -249,6 +263,7 @@
             isRunning: false,
             isJumping: false,
             cameraMode: 'follow', // 'follow', 'orbit', 'first-person'
+            musicEnabled: true,
             keys: {
                 w: false,
                 a: false,
@@ -258,7 +273,13 @@
                 space: false
             }
         };
-        // RPM Avatar Manifest Data
+
+        // Audio context and music
+        let audioContext = null;
+        let musicSource = null;
+        let musicGain = null;
+        let isMusicPlaying = false;
+// RPM Avatar Manifest Data
         const characterData = [
             {
                 id: "6637232cc6a3e0f03418f723",
@@ -332,18 +353,100 @@
             // Keyboard event listeners
             window.addEventListener('keydown', handleKeyDown);
             window.addEventListener('keyup', handleKeyUp);
-
             // Camera controls listener
             window.addEventListener('keydown', (event) => {
                 if (event.key.toLowerCase() === 'c') {
                     cycleCameraMode();
                 }
+                if (event.key.toLowerCase() === 'm') {
+                    toggleMusic();
+                }
             });
-// Populate character selection
+
+            // Music toggle button listener
+            document.getElementById('music-toggle').addEventListener('click', toggleMusic);
+            // Populate character selection
             populateCharacterSelection();
+
+            // Initialize audio context on user interaction
+            document.addEventListener('click', initializeAudio, { once: true });
         });
 
-        function showCharacterSelection() {
+        function initializeAudio() {
+            if (audioContext) return;
+            
+            try {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                musicGain = audioContext.createGain();
+                musicGain.connect(audioContext.destination);
+                musicGain.gain.value = gameState.musicEnabled ? 0.3 : 0;
+                
+                // Create a simple ambient music
+                createAmbientMusic();
+            } catch (error) {
+                console.log('Audio not supported:', error);
+            }
+        }
+
+        function createAmbientMusic() {
+            if (!audioContext) return;
+            
+            const oscillator1 = audioContext.createOscillator();
+            const oscillator2 = audioContext.createOscillator();
+            const lfo = audioContext.createOscillator();
+            const lfoGain = audioContext.createGain();
+            
+            oscillator1.type = 'sine';
+            oscillator1.frequency.value = 220;
+            
+            oscillator2.type = 'triangle';
+            oscillator2.frequency.value = 330;
+            
+            lfo.type = 'sine';
+            lfo.frequency.value = 0.1;
+            
+            lfoGain.gain.value = 10;
+            
+            lfo.connect(lfoGain);
+            lfoGain.connect(oscillator1.frequency);
+            lfoGain.connect(oscillator2.frequency);
+            
+            oscillator1.connect(musicGain);
+            oscillator2.connect(musicGain);
+            
+            oscillator1.start();
+            oscillator2.start();
+            lfo.start();
+            
+            musicSource = { oscillator1, oscillator2, lfo };
+            isMusicPlaying = true;
+        }
+
+        function toggleMusic() {
+            if (!audioContext || !musicGain) {
+                initializeAudio();
+                return;
+            }
+            
+            gameState.musicEnabled = !gameState.musicEnabled;
+            
+            if (musicGain) {
+                musicGain.gain.value = gameState.musicEnabled ? 0.3 : 0;
+            }
+            
+            // Update UI
+            const musicIcon = document.getElementById('music-icon');
+            const musicStatus = document.getElementById('music-status');
+            
+            if (gameState.musicEnabled) {
+                musicIcon.innerHTML = '<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>';
+                musicStatus.textContent = 'Music: On';
+            } else {
+                musicIcon.innerHTML = '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>';
+                musicStatus.textContent = 'Music: Off';
+            }
+        }
+function showCharacterSelection() {
             document.getElementById('welcome-screen').classList.add('opacity-0', 'pointer-events-none');
             document.getElementById('character-selection').classList.remove('opacity-0', 'pointer-events-none');
         }
@@ -363,6 +466,11 @@
                 alert('Please select 2 characters for your world!');
                 return;
             }
+            
+            // Ensure audio is initialized when game starts
+            if (!audioContext) {
+                initializeAudio();
+            }
 document.getElementById('world-selection').classList.add('opacity-0', 'pointer-events-none');
             document.getElementById('game-ui').classList.remove('opacity-0');
             
@@ -1118,6 +1226,9 @@ function showDialog(npc) {
                 case 'c':
                     // Camera mode switching is handled separately
                     break;
+                case 'm':
+                    // Music toggle is handled separately
+                    break;
 }
         }
         function handleKeyUp(event) {