Spaces:

MySafeCode
/

GameSoundSynth

Running

App Files Files Community

MySafeCode commited on 8 days ago

Commit

43c3d79

verified ·

1 Parent(s): 93bd416

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +333 -263

index.html CHANGED Viewed

@@ -1,168 +1,185 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Game Sound Synthesizer - 20 Effects</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Orbitron', monospace;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        .sound-button {
-            background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
-            backdrop-filter: blur(10px);
-            border: 2px solid rgba(255,255,255,0.2);
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            overflow: hidden;
-        }
-        .sound-button::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-radius: 50%;
-            background: rgba(255,255,255,0.5);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-        .sound-button.playing::before {
-            width: 300px;
-            height: 300px;
-        }
-        .sound-button:hover {
-            transform: translateY(-5px) scale(1.05);
-            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
-            border-color: rgba(255,255,255,0.4);
-        }
-        .sound-button:active {
-            transform: translateY(-2px) scale(1.02);
-        }
-        .visualizer {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            height: 100px;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            display: flex;
-            align-items: flex-end;
-            justify-content: space-around;
-            padding: 10px;
-            z-index: 10;
-        }
-        .bar {
-            width: 3px;
-            background: linear-gradient(to top, #00ff88, #00ffff);
-            transition: height 0.1s ease;
-            border-radius: 2px;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .pulse {
-            animation: pulse 0.5s ease-in-out;
-        }
-        .glass-morphism {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .neon-text {
-            text-shadow: 0 0 10px rgba(255,255,255,0.8),
-                         0 0 20px rgba(255,255,255,0.6),
-                         0 0 30px rgba(255,255,255,0.4);
-        }
-        .category-badge {
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            padding: 2px 8px;
-            border-radius: 12px;
-            font-size: 10px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-        }
-        .float-animation {
-            animation: float 3s ease-in-out infinite;
-        }
-    </style>
 </head>
 <body>
-    <!-- Header -->
-    <header class="glass-morphism sticky top-0 z-50 p-4 mb-8">
-        <div class="container mx-auto flex justify-between items-center">
-            <div class="flex items-center space-x-4">
-                <div class="float-animation">
-                    <i class="fas fa-gamepad text-3xl text-white"></i>
-                </div>
-                <div>
-                    <h1 class="text-2xl font-bold text-white neon-text">Game Sound Synthesizer</h1>
-                    <p class="text-xs text-gray-200">20 Procedurally Generated Sound Effects</p>
-                </div>
-            </div>
-            <div class="flex items-center space-x-4">
-                <div class="flex items-center space-x-2">
-                    <i class="fas fa-volume-up text-white"></i>
-                    <input type="range" id="volumeControl" min="0" max="100" value="50"
                            class="w-32 h-2 bg-white/30 rounded-lg appearance-none cursor-pointer">
-                    <span id="volumeValue" class="text-white text-sm">50%</span>
-                </div>
-                <button id="randomPlay" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-all">
                     <i class="fas fa-random mr-2"></i>Random Play
                 </button>
-            </div>
-        </div>
-    </header>
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 pb-32">
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4" id="soundGrid">
-            <!-- Sound buttons will be generated here -->
-        </div>
-    </main>
-    <!-- Visualizer -->
-    <div class="visualizer" id="visualizer">
-        <!-- Bars will be generated here -->
     </div>
-    <script>
-        // Audio Context
         const audioContext = new (window.AudioContext || window.webkitAudioContext)();
         let masterGainNode = audioContext.createGain();
         masterGainNode.connect(audioContext.destination);
@@ -189,7 +206,17 @@
             { id: 17, name: 'Fire', icon: 'fa-fire', category: 'element' },
             { id: 18, name: 'Thunder', icon: 'fa-cloud-bolt', category: 'element' },
             { id: 19, name: 'Level Up', icon: 'fa-trophy', category: 'ui' },
-            { id: 20, name: 'Game Over', icon: 'fa-skull', category: 'ui' }
         ];
         // Sound synthesis functions
@@ -670,117 +697,160 @@
                 osc.start(audioContext.currentTime);
                 osc.stop(audioContext.currentTime + 1);
-            }
-        };
-        // Create visualizer bars
-        function createVisualizer() {
-            const visualizer = document.getElementById('visualizer');
-            for (let i = 0; i < 50; i++) {
-                const bar = document.createElement('div');
-                bar.className = 'bar';
-                bar.style.height = '5px';
-                visualizer.appendChild(bar);
-            }
-        }
-        // Animate visualizer
-        function animateVisualizer() {
-            const bars = document.querySelectorAll('.bar');
-            bars.forEach(bar => {
-                const height = Math.random() * 80 + 20;
-                bar.style.height = `${height}px`;
-            });
-        }
-        // Create sound buttons
-        function createSoundButtons() {
-            const grid = document.getElementById('soundGrid');
-            sounds.forEach(sound => {
-                const button = document.createElement('button');
-                button.className = 'sound-button rounded-xl p-6 text-white hover:shadow-2xl transition-all duration-300 group';
-                button.innerHTML = `
-                    <div class="flex flex-col items-center space-y-3">
-                        <div class="text-4xl group-hover:scale-110 transition-transform">
-                            <i class="fas ${sound.icon}"></i>
-                        </div>
-                        <div class="text-center">
-                            <div class="font-bold text-sm">${sound.name}</div>
-                            <div class="category-badge mt-1">${sound.category}</div>
-                        </div>
-                    </div>
-                `;
-                button.addEventListener('click', () => {
-                    playSound(sound.id, button);
                 });
-                grid.appendChild(button);
-            });
-        }
-        // Play sound function
-        function playSound(soundId, buttonElement) {
-            // Resume audio context if suspended
-            if (audioContext.state === 'suspended') {
-                audioContext.resume();
-            }
-            // Play the sound
-            if (soundSynthesizers[soundId]) {
-                soundSynthesizers[soundId]();
-            }
-            // Visual feedback
-            buttonElement.classList.add('playing', 'pulse');
-            animateVisualizer();
-            setTimeout(() => {
-                buttonElement.classList.remove('playing', 'pulse');
-            }, 500);
-        }
-        // Volume control
-        const volumeControl = document.getElementById('volumeControl');
-        const volumeValue = document.getElementById('volumeValue');
-        volumeControl.addEventListener('input', (e) => {
-            const value = e.target.value;
-            masterGainNode.gain.value = value / 100;
-            volumeValue.textContent = `${value}%`;
-        });
-        // Random play
-        document.getElementById('randomPlay').addEventListener('click', () => {
-            const randomIndex = Math.floor(Math.random() * sounds.length);
-            const randomSound = sounds[randomIndex];
-            const buttons = document.querySelectorAll('.sound-button');
-            playSound(randomSound.id, buttons[randomIndex]);
-        });
-        // Initialize
-        createSoundButtons();
-        createVisualizer();
-        // Periodic visualizer animation
-        setInterval(() => {
-            if (audioContext.state === 'running') {
-                animateVisualizer();
-            }
-        }, 100);
-        // Add footer link
-        const footer = document.createElement('footer');
-        footer.className = 'fixed bottom-24 left-0 right-0 text-center p-2';
-        footer.innerHTML = `
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder"
-               target="_blank"
-               class="text-white/80 hover:text-white text-sm transition-colors">
-                Built with anycoder
-            </a>
-        `;
-        document.body.appendChild(footer);
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Game Sound Synthesizer - 30 Effects</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Orbitron', monospace;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    .sound-button {
+      background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+      backdrop-filter: blur(10px);
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+    }
+    .sound-button::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.5);
+      transform: translate(-50%, -50%);
+      transition: width 0.6s, height 0.6s;
+    }
+    .sound-button.playing::before {
+      width: 300px;
+      height: 300px;
+    }
+    .sound-button:hover {
+      transform: translateY(-5px) scale(1.05);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      border-color: rgba(255, 255, 255, 0.4);
+    }
+    .sound-button:active {
+      transform: translateY(-2px) scale(1.02);
+    }
+    .visualizer {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100px;
+      background: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(10px);
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-around;
+      padding: 10px;
+      z-index: 10;
+    }
+    .bar {
+      width: 3px;
+      background: linear-gradient(to top, #00ff88, #00ffff);
+      transition: height 0.1s ease;
+      border-radius: 2px;
+    }
+    @keyframes pulse {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+    .pulse {
+      animation: pulse 0.5s ease-in-out;
+    }
+    .glass-morphism {
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    .neon-text {
+      text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
+        0 0 20px rgba(255, 255, 255, 0.6),
+        0 0 30px rgba(255, 255, 255, 0.4);
+    }
+    .category-badge {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    @keyframes float {
+      0%,
+      100% {
+        transform: translateY(0px);
+      }
+      50% {
+        transform: translateY(-10px);
+      }
+    }
+    .float-animation {
+      animation: float 3s ease-in-out infinite;
+    }
+  </style>
 </head>
 <body>
+  <!-- Header -->
+  <header class="glass-morphism sticky top-0 z-50 p-4 mb-8">
+    <div class="container mx-auto flex justify-between items-center">
+      <div class="flex items-center space-x-4">
+        <div class="float-animation">
+          <i class="fas fa-gamepad text-3xl text-white"></i>
+        </div>
+        <div>
+          <h1 class="text-2xl font-bold text-white neon-text">Game Sound Synthesizer</h1>
+          <p class="text-xs text-gray-200">30 Procedurally Generated Sound Effects</p>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <div class="flex items-center space-x-2">
+          <i class="fas fa-volume-up text-white"></i>
+          <input type="range" id="volumeControl" min="0" max="100" value="50"
                            class="w-32 h-2 bg-white/30 rounded-lg appearance-none cursor-pointer">
+          <span id="volumeValue" class="text-white text-sm">50%</span>
+        </div>
+        <button id="randomPlay" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-all">
                     <i class="fas fa-random mr-2"></i>Random Play
                 </button>
+      </div>
+    </div>
+  </header>
+  <!-- Main Content -->
+  <main class="container mx-auto px-4 pb-32">
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4" id="soundGrid">
+      <!-- Sound buttons will be generated here -->
     </div>
+  </main>
+  <!-- Visualizer -->
+  <div class="visualizer" id="visualizer">
+    <!-- Bars will be generated here -->
+  </div>
+  <script>
+    // Audio Context
         const audioContext = new (window.AudioContext || window.webkitAudioContext)();
         let masterGainNode = audioContext.createGain();
         masterGainNode.connect(audioContext.destination);
             { id: 17, name: 'Fire', icon: 'fa-fire', category: 'element' },
             { id: 18, name: 'Thunder', icon: 'fa-cloud-bolt', category: 'element' },
             { id: 19, name: 'Level Up', icon: 'fa-trophy', category: 'ui' },
+            { id: 20, name: 'Game Over', icon: 'fa-skull', category: 'ui' },
+            { id: 21, name: 'Menu Click', icon: 'fa-mouse-pointer', category: 'ui' },
+            { id: 22, name: 'Pause', icon: 'fa-pause-circle', category: 'ui' },
+            { id: 23, name: 'Resume', icon: 'fa-play-circle', category: 'ui' },
+            { id: 24, name: 'Achievement', icon: 'fa-medal', category: 'ui' },
+            { id: 25, name: 'Critical Hit', icon: 'fa-crosshairs', category: 'impact' },
+            { id: 26, name: 'Dodge', icon: 'fa-wind', category: 'movement' },
+            { id: 27, name: 'Potion Drink', icon: 'fa-flask', category: 'power' },
+            { id: 28, name: 'Lockpick', icon: 'fa-key', category: 'environment' },
+            { id: 29, name: 'Chest Open', icon: 'fa-box-open', category: 'collect' },
+            { id: 30, name: 'Monster Roar', icon: 'fa-dragon', category: 'creature' }
         ];
         // Sound synthesis functions
                 osc.start(audioContext.currentTime);
                 osc.stop(audioContext.currentTime + 1);
+            },
+            21: () => { // Menu Click
+                const osc = audioContext.createOscillator();
+                const gain = audioContext.createGain();
+                osc.connect(gain);
+                gain.connect(masterGainNode);
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(800, audioContext.currentTime);
+                osc.frequency.exponentialRampToValueAtTime(1200, audioContext.currentTime + 0.05);
+                gain.gain.setValueAtTime(0.2, audioContext.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.05);
+                osc.start(audioContext.currentTime);
+                osc.stop(audioContext.currentTime + 0.05);
+            },
+            22: () => { // Pause
+                const osc = audioContext.createOscillator();
+                const gain = audioContext.createGain();
+                osc.connect(gain);
+                gain.connect(masterGainNode);
+                osc.type = 'triangle';
+                osc.frequency.setValueAtTime(440, audioContext.currentTime);
+                osc.frequency.linearRampToValueAtTime(220, audioContext.currentTime + 0.2);
+                gain.gain.setValueAtTime(0.15, audioContext.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
+                osc.start(audioContext.currentTime);
+                osc.stop(audioContext.currentTime + 0.2);
+            },
+            23: () => { // Resume
+                const osc = audioContext.createOscillator();
+                const gain = audioContext.createGain();
+                osc.connect(gain);
+                gain.connect(masterGainNode);
+                osc.type = 'triangle';
+                osc.frequency.setValueAtTime(220, audioContext.currentTime);
+                osc.frequency.linearRampToValueAtTime(440, audioContext.currentTime + 0.2);
+                gain.gain.setValueAtTime(0.15, audioContext.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
+                osc.start(audioContext.currentTime);
+                osc.stop(audioContext.currentTime + 0.2);
+            },
+            24: () => { // Achievement
+                const notes = [523.25, 659.25, 783.99, 1046.5];
+                notes.forEach((freq, i) => {
+                    const osc = audioContext.createOscillator();
+                    const gain = audioContext.createGain();
+                    osc.connect(gain);
+                    gain.connect(masterGainNode);
+                    osc.frequency.value = freq;
+                    osc.type = 'sine';
+                    gain.gain.setValueAtTime(0, audioContext.currentTime + i * 0.08);
+                    gain.gain.linearRampToValueAtTime(0.25, audioContext.currentTime + i * 0.08 + 0.05);
+                    gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + i * 0.08 + 0.3);
+                    osc.start(audioContext.currentTime + i * 0.08);
+                    osc.stop(audioContext.currentTime + i * 0.08 + 0.3);
                 });
+            },
+            25: () => { // Critical Hit
+                const osc = audioContext.createOscillator();
+                const gain = audioContext.createGain();
+                const filter = audioContext.createBiquadFilter();
+                osc.connect(filter);
+                filter.connect(gain);
+                gain.connect(masterGainNode);
+                osc.type = 'sawtooth';
+                osc.frequency.setValueAtTime(100, audioContext.currentTime);
+                filter.type = 'highpass';
+                filter.frequency.setValueAtTime(500, audioContext.currentTime);
+                filter.Q.value = 15;
+                gain.gain.setValueAtTime(0.5, audioContext.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
+                osc.start(audioContext.currentTime);
+                osc.stop(audioContext.currentTime + 0.3);
+            },
+            26: () => { // Dodge
+                const noise = audioContext.createBufferSource();
+                const filter = audioContext.createBiquadFilter();
+                const gain = audioContext.createGain();
+                const bufferSize = audioContext.sampleRate * 0.15;
+                const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
+                const output = buffer.getChannelData(0);
+                for (let i = 0; i < bufferSize; i++) {
+                    output[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize * 0.2));
+                }
+                noise.buffer = buffer;
+                filter.type = 'bandpass';
+                filter.frequency.setValueAtTime(3000, audioContext.currentTime);
+                filter.frequency.exponentialRampToValueAtTime(1000, audioContext.currentTime + 0.15);
+                noise.connect(filter);
+                filter.connect(gain);
+                gain.connect(masterGainNode);
+                gain.gain.setValueAtTime(0.2, audioContext.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.15);
+                noise.start();
+            },
+            27: () => { // Potion Drink
+                const osc1 = audioContext.createOscillator();
+                const osc2 = audioContext.createOscillator();
+                const gain = audioContext.createGain();
+                osc1.connect(gain);
+                osc2.connect(gain);
+                gain.connect(masterGainNode);
+                osc1.type = 'sine';
+                osc2.type = 'triangle';
+                osc1.frequency.setValueAtTime(349.23, audioContext.currentTime);
+                osc2.frequency.setValueAtTime(440, audioContext.currentTime);
+                osc1.frequency.exponentialRampToValueAtTime(698.46, audioContext.currentTime + 0.4);
+                osc2.frequency.exponentialRampToValueAtTime(880, audioContext.currentTime + 0.4);
+                gain.gain.setValueAtTime(0, audioContext.currentTime);
+                gain.gain.linearRampToValueAtTime(0.2, audioContext.currentTime + 0.05);
+                gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.6);
+                osc1.start(audioContext.currentTime);
+                osc2.start(audioContext.currentTime);
+                osc1.stop(audioContext.currentTime + 0.6);
+                osc2.stop(audioContext.currentTime + 0.6);
+            },
+            28: () => { // Lockpick
+                const osc = audioContext.createO