Hugging Face's logo

Spaces:
MySafeCode
/
GameSoundSynth
Running

App Files Community
MySafeCode commited on
Commit
758d423
·
verified ·
1 Parent(s): e45ea46

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +786 -19
index.html CHANGED
@@ -1,19 +1,786 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Game Sound Synthesizer - 20 Effects</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
11
+
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Orbitron', monospace;
20
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ min-height: 100vh;
22
+ overflow-x: hidden;
23
+ }
24
+
25
+ .sound-button {
26
+ background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
27
+ backdrop-filter: blur(10px);
28
+ border: 2px solid rgba(255,255,255,0.2);
29
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
30
+ position: relative;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .sound-button::before {
35
+ content: '';
36
+ position: absolute;
37
+ top: 50%;
38
+ left: 50%;
39
+ width: 0;
40
+ height: 0;
41
+ border-radius: 50%;
42
+ background: rgba(255,255,255,0.5);
43
+ transform: translate(-50%, -50%);
44
+ transition: width 0.6s, height 0.6s;
45
+ }
46
+
47
+ .sound-button.playing::before {
48
+ width: 300px;
49
+ height: 300px;
50
+ }
51
+
52
+ .sound-button:hover {
53
+ transform: translateY(-5px) scale(1.05);
54
+ box-shadow: 0 20px 40px rgba(0,0,0,0.3);
55
+ border-color: rgba(255,255,255,0.4);
56
+ }
57
+
58
+ .sound-button:active {
59
+ transform: translateY(-2px) scale(1.02);
60
+ }
61
+
62
+ .visualizer {
63
+ position: fixed;
64
+ bottom: 0;
65
+ left: 0;
66
+ right: 0;
67
+ height: 100px;
68
+ background: rgba(0,0,0,0.3);
69
+ backdrop-filter: blur(10px);
70
+ display: flex;
71
+ align-items: flex-end;
72
+ justify-content: space-around;
73
+ padding: 10px;
74
+ z-index: 10;
75
+ }
76
+
77
+ .bar {
78
+ width: 3px;
79
+ background: linear-gradient(to top, #00ff88, #00ffff);
80
+ transition: height 0.1s ease;
81
+ border-radius: 2px;
82
+ }
83
+
84
+ @keyframes pulse {
85
+ 0% { transform: scale(1); }
86
+ 50% { transform: scale(1.05); }
87
+ 100% { transform: scale(1); }
88
+ }
89
+
90
+ .pulse {
91
+ animation: pulse 0.5s ease-in-out;
92
+ }
93
+
94
+ .glass-morphism {
95
+ background: rgba(255, 255, 255, 0.1);
96
+ backdrop-filter: blur(10px);
97
+ border: 1px solid rgba(255, 255, 255, 0.2);
98
+ }
99
+
100
+ .neon-text {
101
+ text-shadow: 0 0 10px rgba(255,255,255,0.8),
102
+ 0 0 20px rgba(255,255,255,0.6),
103
+ 0 0 30px rgba(255,255,255,0.4);
104
+ }
105
+
106
+ .category-badge {
107
+ background: linear-gradient(135deg, #667eea, #764ba2);
108
+ padding: 2px 8px;
109
+ border-radius: 12px;
110
+ font-size: 10px;
111
+ text-transform: uppercase;
112
+ letter-spacing: 1px;
113
+ }
114
+
115
+ @keyframes float {
116
+ 0%, 100% { transform: translateY(0px); }
117
+ 50% { transform: translateY(-10px); }
118
+ }
119
+
120
+ .float-animation {
121
+ animation: float 3s ease-in-out infinite;
122
+ }
123
+ </style>
124
+ </head>
125
+ <body>
126
+ <!-- Header -->
127
+ <header class="glass-morphism sticky top-0 z-50 p-4 mb-8">
128
+ <div class="container mx-auto flex justify-between items-center">
129
+ <div class="flex items-center space-x-4">
130
+ <div class="float-animation">
131
+ <i class="fas fa-gamepad text-3xl text-white"></i>
132
+ </div>
133
+ <div>
134
+ <h1 class="text-2xl font-bold text-white neon-text">Game Sound Synthesizer</h1>
135
+ <p class="text-xs text-gray-200">20 Procedurally Generated Sound Effects</p>
136
+ </div>
137
+ </div>
138
+ <div class="flex items-center space-x-4">
139
+ <div class="flex items-center space-x-2">
140
+ <i class="fas fa-volume-up text-white"></i>
141
+ <input type="range" id="volumeControl" min="0" max="100" value="50"
142
+ class="w-32 h-2 bg-white/30 rounded-lg appearance-none cursor-pointer">
143
+ <span id="volumeValue" class="text-white text-sm">50%</span>
144
+ </div>
145
+ <button id="randomPlay" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-all">
146
+ <i class="fas fa-random mr-2"></i>Random Play
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </header>
151
+
152
+ <!-- Main Content -->
153
+ <main class="container mx-auto px-4 pb-32">
154
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4" id="soundGrid">
155
+ <!-- Sound buttons will be generated here -->
156
+ </div>
157
+ </main>
158
+
159
+ <!-- Visualizer -->
160
+ <div class="visualizer" id="visualizer">
161
+ <!-- Bars will be generated here -->
162
+ </div>
163
+
164
+ <script>
165
+ // Audio Context
166
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
167
+ let masterGainNode = audioContext.createGain();
168
+ masterGainNode.connect(audioContext.destination);
169
+ masterGainNode.gain.value = 0.5;
170
+
171
+ // Sound definitions
172
+ const sounds = [
173
+ { id: 1, name: 'Jump', icon: 'fa-arrow-up', category: 'action' },
174
+ { id: 2, name: 'Explosion', icon: 'fa-burst', category: 'action' },
175
+ { id: 3, name: 'Power Up', icon: 'fa-bolt', category: 'power' },
176
+ { id: 4, name: 'Coin', icon: 'fa-coins', category: 'collect' },
177
+ { id: 5, name: 'Laser', icon: 'fa-location-arrow', category: 'weapon' },
178
+ { id: 6, name: 'Hit', icon: 'fa-hammer', category: 'impact' },
179
+ { id: 7, name: 'Footstep', icon: 'fa-shoe-prints', category: 'movement' },
180
+ { id: 8, name: 'Magic', icon: 'fa-hat-wizard', category: 'magic' },
181
+ { id: 9, name: 'Alert', icon: 'fa-bell', category: 'ui' },
182
+ { id: 10, name: 'Success', icon: 'fa-check-circle', category: 'ui' },
183
+ { id: 11, name: 'Door Open', icon: 'fa-door-open', category: 'environment' },
184
+ { id: 12, name: 'Heal', icon: 'fa-heart', category: 'power' },
185
+ { id: 13, name: 'Shield', icon: 'fa-shield', category: 'power' },
186
+ { id: 14, name: 'Teleport', icon: 'fa-portal-enter', category: 'magic' },
187
+ { id: 15, name: 'Sword Swing', icon: 'fa-sword', category: 'weapon' },
188
+ { id: 16, name: 'Water Splash', icon: 'fa-droplet', category: 'environment' },
189
+ { id: 17, name: 'Fire', icon: 'fa-fire', category: 'element' },
190
+ { id: 18, name: 'Thunder', icon: 'fa-cloud-bolt', category: 'element' },
191
+ { id: 19, name: 'Level Up', icon: 'fa-trophy', category: 'ui' },
192
+ { id: 20, name: 'Game Over', icon: 'fa-skull', category: 'ui' }
193
+ ];
194
+
195
+ // Sound synthesis functions
196
+ const soundSynthesizers = {
197
+ 1: () => { // Jump
198
+ const osc = audioContext.createOscillator();
199
+ const gain = audioContext.createGain();
200
+ osc.connect(gain);
201
+ gain.connect(masterGainNode);
202
+
203
+ osc.frequency.setValueAtTime(400, audioContext.currentTime);
204
+ osc.frequency.exponentialRampToValueAtTime(600, audioContext.currentTime + 0.1);
205
+
206
+ gain.gain.setValueAtTime(0.3, audioContext.currentTime);
207
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
208
+
209
+ osc.start(audioContext.currentTime);
210
+ osc.stop(audioContext.currentTime + 0.2);
211
+ },
212
+
213
+ 2: () => { // Explosion
214
+ const bufferSize = audioContext.sampleRate * 0.5;
215
+ const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
216
+ const output = buffer.getChannelData(0);
217
+
218
+ for (let i = 0; i < bufferSize; i++) {
219
+ output[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / bufferSize, 2);
220
+ }
221
+
222
+ const noise = audioContext.createBufferSource();
223
+ const filter = audioContext.createBiquadFilter();
224
+ const gain = audioContext.createGain();
225
+
226
+ noise.buffer = buffer;
227
+ filter.type = 'lowpass';
228
+ filter.frequency.value = 1000;
229
+
230
+ noise.connect(filter);
231
+ filter.connect(gain);
232
+ gain.connect(masterGainNode);
233
+
234
+ gain.gain.setValueAtTime(0.5, audioContext.currentTime);
235
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
236
+
237
+ noise.start();
238
+ },
239
+
240
+ 3: () => { // Power Up
241
+ const osc1 = audioContext.createOscillator();
242
+ const osc2 = audioContext.createOscillator();
243
+ const gain = audioContext.createGain();
244
+
245
+ osc1.connect(gain);
246
+ osc2.connect(gain);
247
+ gain.connect(masterGainNode);
248
+
249
+ osc1.type = 'sine';
250
+ osc2.type = 'sine';
251
+
252
+ osc1.frequency.setValueAtTime(523.25, audioContext.currentTime);
253
+ osc2.frequency.setValueAtTime(659.25, audioContext.currentTime);
254
+
255
+ osc1.frequency.exponentialRampToValueAtTime(1046.5, audioContext.currentTime + 0.3);
256
+ osc2.frequency.exponentialRampToValueAtTime(1318.5, audioContext.currentTime + 0.3);
257
+
258
+ gain.gain.setValueAtTime(0, audioContext.currentTime);
259
+ gain.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.05);
260
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
261
+
262
+ osc1.start(audioContext.currentTime);
263
+ osc2.start(audioContext.currentTime);
264
+ osc1.stop(audioContext.currentTime + 0.5);
265
+ osc2.stop(audioContext.currentTime + 0.5);
266
+ },
267
+
268
+ 4: () => { // Coin
269
+ const osc = audioContext.createOscillator();
270
+ const gain = audioContext.createGain();
271
+
272
+ osc.connect(gain);
273
+ gain.connect(masterGainNode);
274
+
275
+ osc.type = 'square';
276
+ osc.frequency.setValueAtTime(988, audioContext.currentTime);
277
+ osc.frequency.setValueAtTime(1319, audioContext.currentTime + 0.1);
278
+
279
+ gain.gain.setValueAtTime(0.1, audioContext.currentTime);
280
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.15);
281
+
282
+ osc.start(audioContext.currentTime);
283
+ osc.stop(audioContext.currentTime + 0.15);
284
+ },
285
+
286
+ 5: () => { // Laser
287
+ const osc = audioContext.createOscillator();
288
+ const gain = audioContext.createGain();
289
+ const filter = audioContext.createBiquadFilter();
290
+
291
+ osc.connect(filter);
292
+ filter.connect(gain);
293
+ gain.connect(masterGainNode);
294
+
295
+ osc.type = 'sawtooth';
296
+ osc.frequency.setValueAtTime(800, audioContext.currentTime);
297
+
298
+ filter.type = 'highpass';
299
+ filter.frequency.setValueAtTime(1000, audioContext.currentTime);
300
+ filter.Q.value = 10;
301
+
302
+ gain.gain.setValueAtTime(0.3, audioContext.currentTime);
303
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
304
+
305
+ osc.start(audioContext.currentTime);
306
+ osc.stop(audioContext.currentTime + 0.2);
307
+ },
308
+
309
+ 6: () => { // Hit
310
+ const osc = audioContext.createOscillator();
311
+ const gain = audioContext.createGain();
312
+
313
+ osc.connect(gain);
314
+ gain.connect(masterGainNode);
315
+
316
+ osc.type = 'triangle';
317
+ osc.frequency.setValueAtTime(150, audioContext.currentTime);
318
+ osc.frequency.exponentialRampToValueAtTime(50, audioContext.currentTime + 0.1);
319
+
320
+ gain.gain.setValueAtTime(0.4, audioContext.currentTime);
321
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
322
+
323
+ osc.start(audioContext.currentTime);
324
+ osc.stop(audioContext.currentTime + 0.1);
325
+ },
326
+
327
+ 7: () => { // Footstep
328
+ const noise = audioContext.createBufferSource();
329
+ const filter = audioContext.createBiquadFilter();
330
+ const gain = audioContext.createGain();
331
+ const bufferSize = audioContext.sampleRate * 0.1;
332
+ const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
333
+ const output = buffer.getChannelData(0);
334
+
335
+ for (let i = 0; i < bufferSize; i++) {
336
+ output[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / bufferSize, 3);
337
+ }
338
+
339
+ noise.buffer = buffer;
340
+ filter.type = 'highpass';
341
+ filter.frequency.value = 2000;
342
+
343
+ noise.connect(filter);
344
+ filter.connect(gain);
345
+ gain.connect(masterGainNode);
346
+
347
+ gain.gain.setValueAtTime(0.2, audioContext.currentTime);
348
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
349
+
350
+ noise.start();
351
+ },
352
+
353
+ 8: () => { // Magic
354
+ const osc1 = audioContext.createOscillator();
355
+ const osc2 = audioContext.createOscillator();
356
+ const gain = audioContext.createGain();
357
+ const lfo = audioContext.createOscillator();
358
+ const lfoGain = audioContext.createGain();
359
+
360
+ lfo.frequency.value = 5;
361
+ lfoGain.gain.value = 100;
362
+
363
+ lfo.connect(lfoGain);
364
+ lfoGain.connect(osc1.frequency);
365
+ lfoGain.connect(osc2.frequency);
366
+
367
+ osc1.connect(gain);
368
+ osc2.connect(gain);
369
+ gain.connect(masterGainNode);
370
+
371
+ osc1.type = 'sine';
372
+ osc2.type = 'sine';
373
+ osc1.frequency.value = 440;
374
+ osc2.frequency.value = 554.37;
375
+
376
+ gain.gain.setValueAtTime(0, audioContext.currentTime);
377
+ gain.gain.linearRampToValueAtTime(0.2, audioContext.currentTime + 0.1);
378
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1);
379
+
380
+ osc1.start(audioContext.currentTime);
381
+ osc2.start(audioContext.currentTime);
382
+ lfo.start(audioContext.currentTime);
383
+
384
+ osc1.stop(audioContext.currentTime + 1);
385
+ osc2.stop(audioContext.currentTime + 1);
386
+ lfo.stop(audioContext.currentTime + 1);
387
+ },
388
+
389
+ 9: () => { // Alert
390
+ const osc = audioContext.createOscillator();
391
+ const gain = audioContext.createGain();
392
+
393
+ osc.connect(gain);
394
+ gain.connect(masterGainNode);
395
+
396
+ osc.type = 'square';
397
+ osc.frequency.setValueAtTime(880, audioContext.currentTime);
398
+
399
+ gain.gain.setValueAtTime(0.2, audioContext.currentTime);
400
+ gain.gain.setValueAtTime(0, audioContext.currentTime + 0.1);
401
+ gain.gain.setValueAtTime(0.2, audioContext.currentTime + 0.2);
402
+ gain.gain.setValueAtTime(0, audioContext.currentTime + 0.3);
403
+ gain.gain.setValueAtTime(0.2, audioContext.currentTime + 0.4);
404
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
405
+
406
+ osc.start(audioContext.currentTime);
407
+ osc.stop(audioContext.currentTime + 0.5);
408
+ },
409
+
410
+ 10: () => { // Success
411
+ const notes = [523.25, 659.25, 783.99];
412
+ notes.forEach((freq, i) => {
413
+ const osc = audioContext.createOscillator();
414
+ const gain = audioContext.createGain();
415
+
416
+ osc.connect(gain);
417
+ gain.connect(masterGainNode);
418
+
419
+ osc.frequency.value = freq;
420
+ osc.type = 'sine';
421
+
422
+ gain.gain.setValueAtTime(0, audioContext.currentTime + i * 0.1);
423
+ gain.gain.linearRampToValueAtTime(0.2, audioContext.currentTime + i * 0.1 + 0.05);
424
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + i * 0.1 + 0.3);
425
+
426
+ osc.start(audioContext.currentTime + i * 0.1);
427
+ osc.stop(audioContext.currentTime + i * 0.1 + 0.3);
428
+ });
429
+ },
430
+
431
+ 11: () => { // Door Open
432
+ const osc = audioContext.createOscillator();
433
+ const gain = audioContext.createGain();
434
+
435
+ osc.connect(gain);
436
+ gain.connect(masterGainNode);
437
+
438
+ osc.type = 'sine';
439
+ osc.frequency.setValueAtTime(200, audioContext.currentTime);
440
+ osc.frequency.linearRampToValueAtTime(400, audioContext.currentTime + 0.5);
441
+
442
+ gain.gain.setValueAtTime(0.1, audioContext.currentTime);
443
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
444
+
445
+ osc.start(audioContext.currentTime);
446
+ osc.stop(audioContext.currentTime + 0.5);
447
+ },
448
+
449
+ 12: () => { // Heal
450
+ const osc1 = audioContext.createOscillator();
451
+ const osc2 = audioContext.createOscillator();
452
+ const gain = audioContext.createGain();
453
+
454
+ osc1.connect(gain);
455
+ osc2.connect(gain);
456
+ gain.connect(masterGainNode);
457
+
458
+ osc1.type = 'sine';
459
+ osc2.type = 'sine';
460
+
461
+ osc1.frequency.setValueAtTime(440, audioContext.currentTime);
462
+ osc2.frequency.setValueAtTime(554.37, audioContext.currentTime);
463
+
464
+ osc1.frequency.exponentialRampToValueAtTime(880, audioContext.currentTime + 0.5);
465
+ osc2.frequency.exponentialRampToValueAtTime(1108.73, audioContext.currentTime + 0.5);
466
+
467
+ gain.gain.setValueAtTime(0, audioContext.currentTime);
468
+ gain.gain.linearRampToValueAtTime(0.2, audioContext.currentTime + 0.1);
469
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.8);
470
+
471
+ osc1.start(audioContext.currentTime);
472
+ osc2.start(audioContext.currentTime);
473
+ osc1.stop(audioContext.currentTime + 0.8);
474
+ osc2.stop(audioContext.currentTime + 0.8);
475
+ },
476
+
477
+ 13: () => { // Shield
478
+ const osc = audioContext.createOscillator();
479
+ const gain = audioContext.createGain();
480
+ const filter = audioContext.createBiquadFilter();
481
+
482
+ osc.connect(filter);
483
+ filter.connect(gain);
484
+ gain.connect(masterGainNode);
485
+
486
+ osc.type = 'sawtooth';
487
+ osc.frequency.value = 150;
488
+
489
+ filter.type = 'bandpass';
490
+ filter.frequency.value = 500;
491
+ filter.Q.value = 5;
492
+
493
+ gain.gain.setValueAtTime(0.2, audioContext.currentTime);
494
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
495
+
496
+ osc.start(audioContext.currentTime);
497
+ osc.stop(audioContext.currentTime + 0.3);
498
+ },
499
+
500
+ 14: () => { // Teleport
501
+ const bufferSize = audioContext.sampleRate * 0.3;
502
+ const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
503
+ const output = buffer.getChannelData(0);
504
+
505
+ for (let i = 0; i < bufferSize; i++) {
506
+ output[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize * 0.1));
507
+ }
508
+
509
+ const noise = audioContext.createBufferSource();
510
+ const filter = audioContext.createBiquadFilter();
511
+ const gain = audioContext.createGain();
512
+
513
+ noise.buffer = buffer;
514
+ filter.type = 'highpass';
515
+ filter.frequency.setValueAtTime(100, audioContext.currentTime);
516
+ filter.frequency.exponentialRampToValueAtTime(5000, audioContext.currentTime + 0.3);
517
+
518
+ noise.connect(filter);
519
+ filter.connect(gain);
520
+ gain.connect(masterGainNode);
521
+
522
+ gain.gain.setValueAtTime(0.3, audioContext.currentTime);
523
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
524
+
525
+ noise.start();
526
+ },
527
+
528
+ 15: () => { // Sword Swing
529
+ const noise = audioContext.createBufferSource();
530
+ const filter = audioContext.createBiquadFilter();
531
+ const gain = audioContext.createGain();
532
+ const bufferSize = audioContext.sampleRate * 0.2;
533
+ const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
534
+ const output = buffer.getChannelData(0);
535
+
536
+ for (let i = 0; i < bufferSize; i++) {
537
+ output[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / bufferSize, 2);
538
+ }
539
+
540
+ noise.buffer = buffer;
541
+ filter.type = 'highpass';
542
+ filter.frequency.value = 3000;
543
+
544
+ noise.connect(filter);
545
+ filter.connect(gain);
546
+ gain.connect(masterGainNode);
547
+
548
+ gain.gain.setValueAtTime(0.3, audioContext.currentTime);
549
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
550
+
551
+ noise.start();
552
+ },
553
+
554
+ 16: () => { // Water Splash
555
+ const bufferSize = audioContext.sampleRate * 0.4;
556
+ const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
557
+ const output = buffer.getChannelData(0);
558
+
559
+ for (let i = 0; i < bufferSize; i++) {
560
+ output[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / bufferSize, 1.5);
561
+ }
562
+
563
+ const noise = audioContext.createBufferSource();
564
+ const filter = audioContext.createBiquadFilter();
565
+ const gain = audioContext.createGain();
566
+
567
+ noise.buffer = buffer;
568
+ filter.type = 'bandpass';
569
+ filter.frequency.value = 1000;
570
+ filter.Q.value = 2;
571
+
572
+ noise.connect(filter);
573
+ filter.connect(gain);
574
+ gain.connect(masterGainNode);
575
+
576
+ gain.gain.setValueAtTime(0.3, audioContext.currentTime);
577
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.4);
578
+
579
+ noise.start();
580
+ },
581
+
582
+ 17: () => { // Fire
583
+ const bufferSize = audioContext.sampleRate * 0.5;
584
+ const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
585
+ const output = buffer.getChannelData(0);
586
+
587
+ for (let i = 0; i < bufferSize; i++) {
588
+ output[i] = (Math.random() * 2 - 1) * (1 - i / bufferSize);
589
+ }
590
+
591
+ const noise = audioContext.createBufferSource();
592
+ const filter = audioContext.createBiquadFilter();
593
+ const gain = audioContext.createGain();
594
+
595
+ noise.buffer = buffer;
596
+ filter.type = 'lowpass';
597
+ filter.frequency.value = 2000;
598
+
599
+ noise.connect(filter);
600
+ filter.connect(gain);
601
+ gain.connect(masterGainNode);
602
+
603
+ gain.gain.setValueAtTime(0.2, audioContext.currentTime);
604
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
605
+
606
+ noise.start();
607
+ },
608
+
609
+ 18: () => { // Thunder
610
+ const bufferSize = audioContext.sampleRate * 1;
611
+ const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
612
+ const output = buffer.getChannelData(0);
613
+
614
+ for (let i = 0; i < bufferSize; i++) {
615
+ output[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize * 0.05));
616
+ }
617
+
618
+ const noise = audioContext.createBufferSource();
619
+ const filter = audioContext.createBiquadFilter();
620
+ const gain = audioContext.createGain();
621
+
622
+ noise.buffer = buffer;
623
+ filter.type = 'lowpass';
624
+ filter.frequency.value = 200;
625
+
626
+ noise.connect(filter);
627
+ filter.connect(gain);
628
+ gain.connect(masterGainNode);
629
+
630
+ gain.gain.setValueAtTime(0.5, audioContext.currentTime);
631
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1);
632
+
633
+ noise.start();
634
+ },
635
+
636
+ 19: () => { // Level Up
637
+ const notes = [261.63, 329.63, 392, 523.25, 659.25];
638
+ notes.forEach((freq, i) => {
639
+ const osc = audioContext.createOscillator();
640
+ const gain = audioContext.createGain();
641
+
642
+ osc.connect(gain);
643
+ gain.connect(masterGainNode);
644
+
645
+ osc.frequency.value = freq;
646
+ osc.type = 'square';
647
+
648
+ gain.gain.setValueAtTime(0, audioContext.currentTime + i * 0.1);
649
+ gain.gain.linearRampToValueAtTime(0.15, audioContext.currentTime + i * 0.1 + 0.05);
650
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + i * 0.1 + 0.2);
651
+
652
+ osc.start(audioContext.currentTime + i * 0.1);
653
+ osc.stop(audioContext.currentTime + i * 0.1 + 0.2);
654
+ });
655
+ },
656
+
657
+ 20: () => { // Game Over
658
+ const osc = audioContext.createOscillator();
659
+ const gain = audioContext.createGain();
660
+
661
+ osc.connect(gain);
662
+ gain.connect(masterGainNode);
663
+
664
+ osc.type = 'sawtooth';
665
+ osc.frequency.setValueAtTime(440, audioContext.currentTime);
666
+ osc.frequency.exponentialRampToValueAtTime(110, audioContext.currentTime + 1);
667
+
668
+ gain.gain.setValueAtTime(0.3, audioContext.currentTime);
669
+ gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1);
670
+
671
+ osc.start(audioContext.currentTime);
672
+ osc.stop(audioContext.currentTime + 1);
673
+ }
674
+ };
675
+
676
+ // Create visualizer bars
677
+ function createVisualizer() {
678
+ const visualizer = document.getElementById('visualizer');
679
+ for (let i = 0; i < 50; i++) {
680
+ const bar = document.createElement('div');
681
+ bar.className = 'bar';
682
+ bar.style.height = '5px';
683
+ visualizer.appendChild(bar);
684
+ }
685
+ }
686
+
687
+ // Animate visualizer
688
+ function animateVisualizer() {
689
+ const bars = document.querySelectorAll('.bar');
690
+ bars.forEach(bar => {
691
+ const height = Math.random() * 80 + 20;
692
+ bar.style.height = `${height}px`;
693
+ });
694
+ }
695
+
696
+ // Create sound buttons
697
+ function createSoundButtons() {
698
+ const grid = document.getElementById('soundGrid');
699
+
700
+ sounds.forEach(sound => {
701
+ const button = document.createElement('button');
702
+ button.className = 'sound-button rounded-xl p-6 text-white hover:shadow-2xl transition-all duration-300 group';
703
+ button.innerHTML = `
704
+ <div class="flex flex-col items-center space-y-3">
705
+ <div class="text-4xl group-hover:scale-110 transition-transform">
706
+ <i class="fas ${sound.icon}"></i>
707
+ </div>
708
+ <div class="text-center">
709
+ <div class="font-bold text-sm">${sound.name}</div>
710
+ <div class="category-badge mt-1">${sound.category}</div>
711
+ </div>
712
+ </div>
713
+ `;
714
+
715
+ button.addEventListener('click', () => {
716
+ playSound(sound.id, button);
717
+ });
718
+
719
+ grid.appendChild(button);
720
+ });
721
+ }
722
+
723
+ // Play sound function
724
+ function playSound(soundId, buttonElement) {
725
+ // Resume audio context if suspended
726
+ if (audioContext.state === 'suspended') {
727
+ audioContext.resume();
728
+ }
729
+
730
+ // Play the sound
731
+ if (soundSynthesizers[soundId]) {
732
+ soundSynthesizers[soundId]();
733
+ }
734
+
735
+ // Visual feedback
736
+ buttonElement.classList.add('playing', 'pulse');
737
+ animateVisualizer();
738
+
739
+ setTimeout(() => {
740
+ buttonElement.classList.remove('playing', 'pulse');
741
+ }, 500);
742
+ }
743
+
744
+ // Volume control
745
+ const volumeControl = document.getElementById('volumeControl');
746
+ const volumeValue = document.getElementById('volumeValue');
747
+
748
+ volumeControl.addEventListener('input', (e) => {
749
+ const value = e.target.value;
750
+ masterGainNode.gain.value = value / 100;
751
+ volumeValue.textContent = `${value}%`;
752
+ });
753
+
754
+ // Random play
755
+ document.getElementById('randomPlay').addEventListener('click', () => {
756
+ const randomIndex = Math.floor(Math.random() * sounds.length);
757
+ const randomSound = sounds[randomIndex];
758
+ const buttons = document.querySelectorAll('.sound-button');
759
+ playSound(randomSound.id, buttons[randomIndex]);
760
+ });
761
+
762
+ // Initialize
763
+ createSoundButtons();
764
+ createVisualizer();
765
+
766
+ // Periodic visualizer animation
767
+ setInterval(() => {
768
+ if (audioContext.state === 'running') {
769
+ animateVisualizer();
770
+ }
771
+ }, 100);
772
+
773
+ // Add footer link
774
+ const footer = document.createElement('footer');
775
+ footer.className = 'fixed bottom-24 left-0 right-0 text-center p-2';
776
+ footer.innerHTML = `
777
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder"
778
+ target="_blank"
779
+ class="text-white/80 hover:text-white text-sm transition-colors">
780
+ Built with anycoder
781
+ </a>
782
+ `;
783
+ document.body.appendChild(footer);
784
+ </script>
785
+ </body>
786
+ </html>