Hugging Face's logo

Spaces:
MrEzzat
/
audio-edititng
Running

App Files Community
MrEzzat commited on
Commit
c921a6e
·
verified ·
1 Parent(s): b8fbd6f

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +865 -411
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Waveform - Professional Audio Editing SaaS</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>
@@ -50,6 +50,36 @@
50
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
51
  }
52
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  /* Custom scrollbar */
54
  ::-webkit-scrollbar {
55
  width: 8px;
@@ -89,6 +119,82 @@
89
  .recording-animation {
90
  animation: pulse 1.5s infinite;
91
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </style>
93
  </head>
94
  <body class="bg-gray-50 text-gray-800 font-sans">
@@ -98,515 +204,863 @@
98
  <div class="flex justify-between h-16 items-center">
99
  <div class="flex items-center">
100
  <i class="fas fa-wave-square text-2xl mr-2 text-indigo-300"></i>
101
- <span class="text-xl font-bold">Waveform</span>
102
  </div>
103
  <div class="hidden md:flex items-center space-x-8">
104
- <a href="#" class="hover:text-indigo-200 transition">Features</a>
105
- <a href="#" class="hover:text-indigo-200 transition">Pricing</a>
106
- <a href="#" class="hover:text-indigo-200 transition">Tutorials</a>
107
- <a href="#" class="hover:text-indigo-200 transition">Blog</a>
108
  </div>
109
  <div class="flex items-center space-x-4">
110
- <button class="px-4 py-2 rounded-md bg-indigo-700 hover:bg-indigo-600 transition">Login</button>
111
- <button class="px-4 py-2 rounded-md bg-white text-indigo-900 hover:bg-gray-100 transition">Sign Up</button>
112
  </div>
113
- <button class="md:hidden">
114
- <i class="fas fa-bars text-xl"></i>
115
- </button>
116
  </div>
117
  </div>
118
  </nav>
119
 
120
- <!-- Hero Section -->
121
- <div class="bg-gradient-to-r from-indigo-900 to-purple-900 text-white py-20">
122
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
123
- <div class="md:flex items-center justify-between">
124
- <div class="md:w-1/2 mb-10 md:mb-0">
125
- <h1 class="text-4xl md:text-5xl font-bold mb-6">Professional Audio Editing in Your Browser</h1>
126
- <p class="text-xl mb-8 text-indigo-100">Edit, mix, and master audio files with our powerful cloud-based tools. No downloads required.</p>
127
- <div class="flex space-x-4">
128
- <button class="px-6 py-3 rounded-md bg-white text-indigo-900 font-medium hover:bg-gray-100 transition">Start Free Trial</button>
129
- <button class="px-6 py-3 rounded-md border border-white text-white hover:bg-white hover:bg-opacity-10 transition">Watch Demo</button>
130
- </div>
131
- </div>
132
- <div class="md:w-1/2 relative">
133
- <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 shadow-2xl">
134
- <div class="flex justify-between items-center mb-4">
135
- <div class="flex space-x-2">
136
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
137
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
138
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
139
- </div>
140
- <span class="text-sm text-indigo-200">demo.wav</span>
141
- </div>
142
- <div class="waveform-container mb-4">
143
- <div class="waveform" id="demoWaveform"></div>
144
- <div class="playhead" id="demoPlayhead"></div>
145
- </div>
146
- <div class="flex justify-between items-center">
147
- <div class="flex space-x-4">
148
- <button class="w-10 h-10 rounded-full bg-indigo-700 hover:bg-indigo-600 flex items-center justify-center">
149
- <i class="fas fa-play"></i>
150
- </button>
151
- <button class="w-10 h-10 rounded-full bg-indigo-700 hover:bg-indigo-600 flex items-center justify-center">
152
- <i class="fas fa-pause"></i>
153
- </button>
154
- <button class="w-10 h-10 rounded-full bg-indigo-700 hover:bg-indigo-600 flex items-center justify-center">
155
- <i class="fas fa-redo"></i>
156
- </button>
157
- </div>
158
- <div class="text-sm text-indigo-200">1:24 / 3:45</div>
159
- </div>
160
- </div>
161
- </div>
162
- </div>
163
- </div>
164
- </div>
165
-
166
  <!-- Main Editor Section -->
167
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
168
- <div class="flex flex-col lg:flex-row gap-8">
169
  <!-- Left Sidebar - Tracks -->
170
- <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-6">
171
- <div class="flex justify-between items-center mb-6">
172
- <h2 class="text-xl font-bold">Tracks</h2>
173
- <button class="text-indigo-600 hover:text-indigo-800">
174
  <i class="fas fa-plus"></i> Add Track
175
  </button>
176
  </div>
177
 
178
- <div class="space-y-4">
179
- <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition">
180
- <div class="flex justify-between items-center mb-2">
181
- <span class="font-medium">Vocals</span>
182
- <div class="flex space-x-2">
183
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-eye"></i></button>
184
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-volume-up"></i></button>
185
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-ellipsis-v"></i></button>
186
- </div>
187
- </div>
188
- <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
189
- <div class="h-full bg-indigo-500 w-3/4"></div>
190
- </div>
191
- </div>
192
-
193
- <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition">
194
- <div class="flex justify-between items-center mb-2">
195
- <span class="font-medium">Guitar</span>
196
- <div class="flex space-x-2">
197
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-eye"></i></button>
198
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-volume-up"></i></button>
199
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-ellipsis-v"></i></button>
200
- </div>
201
- </div>
202
- <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
203
- <div class="h-full bg-green-500 w-1/2"></div>
204
- </div>
205
- </div>
206
-
207
- <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition">
208
- <div class="flex justify-between items-center mb-2">
209
- <span class="font-medium">Drums</span>
210
- <div class="flex space-x-2">
211
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-eye"></i></button>
212
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-volume-up"></i></button>
213
- <button class="text-gray-500 hover:text-indigo-600"><i class="fas fa-ellipsis-v"></i></button>
214
- </div>
215
- </div>
216
- <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
217
- <div class="h-full bg-yellow-500 w-2/3"></div>
218
- </div>
219
- </div>
220
  </div>
221
 
222
- <div class="mt-6 pt-6 border-t border-gray-200">
223
- <h3 class="font-medium mb-3">Master Track</h3>
224
- <div class="flex items-center space-x-4">
225
  <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
226
  <i class="fas fa-sliders-h"></i>
227
  </div>
228
  <div class="flex-1">
229
- <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
230
- <div class="h-full bg-purple-500 w-4/5"></div>
231
- </div>
232
  </div>
 
233
  </div>
234
  </div>
235
  </div>
236
 
237
  <!-- Main Editor Area -->
238
- <div class="lg:w-2/4 bg-white rounded-xl shadow-md p-6">
239
- <div class="flex justify-between items-center mb-6">
240
- <h2 class="text-xl font-bold">Timeline</h2>
241
- <div class="flex space-x-4">
242
- <button class="px-3 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-sm">Snap: On</button>
243
- <button class="px-3 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-sm">Grid: 1/4</button>
244
- <button class="px-3 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-sm">Zoom: 100%</button>
245
- </div>
246
  </div>
247
 
248
- <div class="waveform-container mb-4">
 
249
  <div class="waveform" id="mainWaveform"></div>
250
  <div class="playhead" id="mainPlayhead"></div>
 
 
 
 
251
  </div>
252
 
253
- <div class="bg-gray-50 rounded-lg p-4 mb-6">
254
- <div class="flex items-center space-x-4 overflow-x-auto pb-2">
255
- <div class="flex-shrink-0 w-48 h-16 bg-indigo-100 rounded-md border border-indigo-200 relative">
256
- <div class="absolute inset-0 flex items-center justify-center text-indigo-500">
257
- <i class="fas fa-music mr-2"></i>
258
- <span class="text-sm">Vocal Take 1</span>
259
- </div>
260
- </div>
261
- <div class="flex-shrink-0 w-32 h-16 bg-green-100 rounded-md border border-green-200 relative">
262
- <div class="absolute inset-0 flex items-center justify-center text-green-600">
263
- <i class="fas fa-guitar mr-2"></i>
264
- <span class="text-sm">Guitar</span>
265
- </div>
266
- </div>
267
- <div class="flex-shrink-0 w-64 h-16 bg-yellow-100 rounded-md border border-yellow-200 relative">
268
- <div class="absolute inset-0 flex items-center justify-center text-yellow-600">
269
- <i class="fas fa-drum mr-2"></i>
270
- <span class="text-sm">Drum Loop</span>
271
- </div>
272
- </div>
273
- <div class="flex-shrink-0 w-24 h-16 bg-purple-100 rounded-md border border-purple-200 relative">
274
- <div class="absolute inset-0 flex items-center justify-center text-purple-600">
275
- <i class="fas fa-bell mr-2"></i>
276
- <span class="text-sm">Chimes</span>
277
- </div>
278
- </div>
279
- </div>
280
  </div>
281
 
 
282
  <div class="flex justify-between items-center">
283
- <div class="flex space-x-4">
284
- <button class="w-12 h-12 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 flex items-center justify-center">
285
  <i class="fas fa-play"></i>
 
286
  </button>
287
- <button class="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center">
288
  <i class="fas fa-pause"></i>
 
289
  </button>
290
- <button class="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center">
291
  <i class="fas fa-stop"></i>
 
292
  </button>
293
- <button class="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center">
294
  <i class="fas fa-redo"></i>
 
295
  </button>
296
  </div>
297
- <div class="text-gray-600">00:02:34 / 00:04:12</div>
298
- </div>
299
- </div>
300
-
301
- <!-- Right Sidebar - Effects & Tools -->
302
- <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-6">
303
- <div class="flex justify-between items-center mb-6">
304
- <h2 class="text-xl font-bold">Effects & Tools</h2>
305
- <button class="text-indigo-600 hover:text-indigo-800">
306
- <i class="fas fa-search"></i>
307
- </button>
308
- </div>
309
-
310
- <div class="space-y-4">
311
- <div class="effect-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition cursor-pointer">
312
- <div class="flex items-center space-x-3">
313
- <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
314
- <i class="fas fa-sliders-h"></i>
315
- </div>
316
- <div>
317
- <h3 class="font-medium">EQ</h3>
318
- <p class="text-sm text-gray-500">Adjust frequency balance</p>
319
- </div>
320
- </div>
321
- </div>
322
-
323
- <div class="effect-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition cursor-pointer">
324
- <div class="flex items-center space-x-3">
325
- <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
326
- <i class="fas fa-compress-arrows-alt"></i>
327
- </div>
328
- <div>
329
- <h3 class="font-medium">Compressor</h3>
330
- <p class="text-sm text-gray-500">Control dynamic range</p>
331
- </div>
332
- </div>
333
- </div>
334
-
335
- <div class="effect-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition cursor-pointer">
336
- <div class="flex items-center space-x-3">
337
- <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
338
- <i class="fas fa-echo"></i>
339
- </div>
340
- <div>
341
- <h3 class="font-medium">Reverb</h3>
342
- <p class="text-sm text-gray-500">Add space and depth</p>
343
- </div>
344
- </div>
345
- </div>
346
-
347
- <div class="effect-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition cursor-pointer">
348
- <div class="flex items-center space-x-3">
349
- <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
350
- <i class="fas fa-clock"></i>
351
- </div>
352
- <div>
353
- <h3 class="font-medium">Delay</h3>
354
- <p class="text-sm text-gray-500">Create echoes</p>
355
- </div>
356
- </div>
357
- </div>
358
 
359
- <div class="effect-card bg-gray-50 rounded-lg p-4 border border-gray-200 transition cursor-pointer">
360
- <div class="flex items-center space-x-3">
361
- <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
362
- <i class="fas fa-cut"></i>
363
- </div>
364
- <div>
365
- <h3 class="font-medium">Noise Reduction</h3>
366
- <p class="text-sm text-gray-500">Remove background noise</p>
367
- </div>
368
  </div>
 
369
  </div>
370
  </div>
371
 
372
- <div class="mt-6 pt-6 border-t border-gray-200">
373
- <h3 class="font-medium mb-3">Recording</h3>
374
- <button id="recordButton" class="w-full py-3 rounded-md bg-red-600 hover:bg-red-700 text-white flex items-center justify-center transition">
375
- <i class="fas fa-circle mr-2"></i> Start Recording
376
- </button>
377
- <div class="mt-4 text-sm text-gray-500">
378
- <p>Input: Built-in Microphone</p>
379
- <p>Format: WAV, 44.1kHz, 16-bit</p>
 
 
 
 
380
  </div>
 
381
  </div>
382
  </div>
383
- </div>
384
- </div>
385
-
386
- <!-- Features Section -->
387
- <div class="bg-gray-100 py-16">
388
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
389
- <div class="text-center mb-16">
390
- <h2 class="text-3xl font-bold mb-4">Powerful Audio Editing Features</h2>
391
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to create professional-quality audio productions</p>
392
- </div>
393
 
394
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
395
- <div class="bg-white rounded-xl shadow-md p-8 hover:shadow-lg transition">
396
- <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mb-6">
397
- <i class="fas fa-cut text-2xl"></i>
398
- </div>
399
- <h3 class="text-xl font-bold mb-3">Precision Editing</h3>
400
- <p class="text-gray-600">Cut, trim, split, and arrange audio with sample-accurate precision. Our non-destructive editing lets you experiment freely.</p>
401
  </div>
402
 
403
- <div class="bg-white rounded-xl shadow-md p-8 hover:shadow-lg transition">
404
- <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mb-6">
405
- <i class="fas fa-sliders-h text-2xl"></i>
406
- </div>
407
- <h3 class="text-xl font-bold mb-3">Professional Effects</h3>
408
- <p class="text-gray-600">Access a full suite of studio-quality effects including EQ, compression, reverb, delay, noise reduction, and more.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
409
  </div>
410
 
411
- <div class="bg-white rounded-xl shadow-md p-8 hover:shadow-lg transition">
412
- <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center text-green-600 mb-6">
413
- <i class="fas fa-layer-group text-2xl"></i>
 
414
  </div>
415
- <h3 class="text-xl font-bold mb-3">Multi-Track Mixing</h3>
416
- <p class="text-gray-600">Mix unlimited audio tracks with volume, pan, and effects controls. Create complex arrangements with ease.</p>
417
- </div>
418
-
419
- <div class="bg-white rounded-xl shadow-md p-8 hover:shadow-lg transition">
420
- <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mb-6">
421
- <i class="fas fa-cloud-upload-alt text-2xl"></i>
422
  </div>
423
- <h3 class="text-xl font-bold mb-3">Cloud Storage</h3>
424
- <p class="text-gray-600">Your projects are automatically saved to the cloud. Access them from any device, anytime.</p>
425
- </div>
426
-
427
- <div class="bg-white rounded-xl shadow-md p-8 hover:shadow-lg transition">
428
- <div class="w-14 h-14 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mb-6">
429
- <i class="fas fa-users text-2xl"></i>
430
  </div>
431
- <h3 class="text-xl font-bold mb-3">Collaboration</h3>
432
- <p class="text-gray-600">Work with team members in real-time. Share projects and leave comments for seamless collaboration.</p>
433
  </div>
434
 
435
- <div class="bg-white rounded-xl shadow-md p-8 hover:shadow-lg transition">
436
- <div class="w-14 h-14 rounded-full bg-red-100 flex items-center justify-center text-red-600 mb-6">
437
- <i class="fas fa-file-export text-2xl"></i>
 
 
 
 
 
438
  </div>
439
- <h3 class="text-xl font-bold mb-3">Export Options</h3>
440
- <p class="text-gray-600">Export in multiple formats (MP3, WAV, FLAC, etc.) with customizable quality settings for any use case.</p>
441
  </div>
442
  </div>
443
  </div>
444
  </div>
445
 
446
- <!-- Call to Action -->
447
- <div class="bg-indigo-900 text-white py-20">
448
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
449
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Audio?</h2>
450
- <p class="text-xl mb-8 max-w-3xl mx-auto text-indigo-200">Join thousands of creators who use Waveform to produce professional audio content.</p>
451
- <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
452
- <button class="px-8 py-4 rounded-md bg-white text-indigo-900 font-bold hover:bg-gray-100 transition">Start Free 14-Day Trial</button>
453
- <button class="px-8 py-4 rounded-md border border-white text-white hover:bg-white hover:bg-opacity-10 transition">Schedule a Demo</button>
 
 
 
 
 
 
 
 
454
  </div>
 
 
 
455
  </div>
456
  </div>
457
 
458
- <!-- Footer -->
459
- <footer class="bg-gray-900 text-gray-400 py-12">
460
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
461
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
462
- <div>
463
- <h3 class="text-white text-lg font-medium mb-4">Product</h3>
464
- <ul class="space-y-2">
465
- <li><a href="#" class="hover:text-white transition">Features</a></li>
466
- <li><a href="#" class="hover:text-white transition">Pricing</a></li>
467
- <li><a href="#" class="hover:text-white transition">Integrations</a></li>
468
- <li><a href="#" class="hover:text-white transition">Updates</a></li>
469
- </ul>
470
- </div>
471
- <div>
472
- <h3 class="text-white text-lg font-medium mb-4">Resources</h3>
473
- <ul class="space-y-2">
474
- <li><a href="#" class="hover:text-white transition">Documentation</a></li>
475
- <li><a href="#" class="hover:text-white transition">Tutorials</a></li>
476
- <li><a href="#" class="hover:text-white transition">Blog</a></li>
477
- <li><a href="#" class="hover:text-white transition">Community</a></li>
478
- </ul>
479
- </div>
480
- <div>
481
- <h3 class="text-white text-lg font-medium mb-4">Company</h3>
482
- <ul class="space-y-2">
483
- <li><a href="#" class="hover:text-white transition">About</a></li>
484
- <li><a href="#" class="hover:text-white transition">Careers</a></li>
485
- <li><a href="#" class="hover:text-white transition">Contact</a></li>
486
- <li><a href="#" class="hover:text-white transition">Press</a></li>
487
- </ul>
488
- </div>
489
- <div>
490
- <h3 class="text-white text-lg font-medium mb-4">Connect</h3>
491
- <div class="flex space-x-4 mb-4">
492
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
493
- <i class="fab fa-twitter"></i>
494
- </a>
495
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
496
- <i class="fab fa-facebook-f"></i>
497
- </a>
498
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
499
- <i class="fab fa-instagram"></i>
500
- </a>
501
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
502
- <i class="fab fa-youtube"></i>
503
- </a>
504
- </div>
505
- <p class="text-sm">Subscribe to our newsletter</p>
506
- <div class="mt-2 flex">
507
- <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full">
508
- <button class="px-4 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition">Go</button>
509
- </div>
510
- </div>
511
- </div>
512
- <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
513
- <div class="flex items-center mb-4 md:mb-0">
514
- <i class="fas fa-wave-square text-2xl mr-2 text-indigo-400"></i>
515
- <span class="text-xl font-bold text-white">Waveform</span>
516
- </div>
517
- <div class="text-sm">
518
- <span>© 2023 Waveform Audio, Inc. All rights reserved.</span>
519
- <a href="#" class="ml-4 hover:text-white transition">Privacy</a>
520
- <a href="#" class="ml-4 hover:text-white transition">Terms</a>
521
- <a href="#" class="ml-4 hover:text-white transition">Cookies</a>
522
- </div>
523
  </div>
524
  </div>
525
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
526
 
527
  <script>
528
- // Generate random waveform data
529
- function generateWaveformData(count) {
530
- const data = [];
531
- for (let i = 0; i < count; i++) {
532
- data.push(Math.random() * 100 + 10); // Random height between 10 and 110
533
- }
534
- return data;
535
- }
 
 
 
 
 
 
 
 
 
 
 
 
536
 
537
- // Create waveform visualization
538
- function createWaveform(elementId, data) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
539
  const container = document.getElementById(elementId);
540
  container.innerHTML = '';
541
 
542
- data.forEach(height => {
543
  const bar = document.createElement('div');
544
  bar.className = 'waveform-bar';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
545
  bar.style.height = `${height}%`;
546
  container.appendChild(bar);
547
- });
548
  }
549
 
550
- // Animate playhead
551
- function animatePlayhead(elementId, duration) {
552
- const playhead = document.getElementById(elementId);
553
- const container = playhead.parentElement;
554
- let start = null;
555
 
556
- function step(timestamp) {
557
- if (!start) start = timestamp;
558
- const progress = (timestamp - start) / (duration * 1000);
559
- if (progress < 1) {
560
- playhead.style.left = `${progress * 100}%`;
561
- window.requestAnimationFrame(step);
562
- } else {
563
- playhead.style.left = '0';
564
- start = timestamp;
565
- window.requestAnimationFrame(step);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
566
  }
 
 
 
 
 
567
  }
568
 
569
- window.requestAnimationFrame(step);
570
  }
571
 
572
- // Initialize waveforms
573
- document.addEventListener('DOMContentLoaded', function() {
574
- const demoData = generateWaveformData(120);
575
- const mainData = generateWaveformData(200);
576
-
577
- createWaveform('demoWaveform', demoData);
578
- createWaveform('mainWaveform', mainData);
579
-
580
- animatePlayhead('demoPlayhead', 3.45);
581
- animatePlayhead('mainPlayhead', 4.12);
582
-
583
- // Recording button functionality
584
- const recordButton = document.getElementById('recordButton');
585
- let isRecording = false;
586
-
587
- recordButton.addEventListener('click', function() {
588
- isRecording = !isRecording;
589
- if (isRecording) {
590
- recordButton.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Recording';
591
- recordButton.classList.remove('bg-red-600', 'hover:bg-red-700');
592
- recordButton.classList.add('bg-gray-700', 'hover:bg-gray-800');
593
- recordButton.classList.add('recording-animation');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
594
  } else {
595
- recordButton.innerHTML = '<i class="fas fa-circle mr-2"></i> Start Recording';
596
- recordButton.classList.add('bg-red-600', 'hover:bg-red-700');
597
- recordButton.classList.remove('bg-gray-700', 'hover:bg-gray-800');
598
- recordButton.classList.remove('recording-animation');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
599
  }
600
  });
601
 
602
- // Effect cards click handler
603
- document.querySelectorAll('.effect-card').forEach(card => {
604
- card.addEventListener('click', function() {
605
- // In a real app, this would open the effect panel
606
- console.log('Effect selected:', this.querySelector('h3').textContent);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
607
  });
 
 
 
608
  });
609
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
610
  </script>
611
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MrEzzat/audio-edititng" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
612
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Waveform - Professional Audio Editor</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>
 
50
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
51
  }
52
 
53
+ /* Selection area for trimming */
54
+ .selection-area {
55
+ position: absolute;
56
+ top: 0;
57
+ height: 100%;
58
+ background-color: rgba(79, 70, 229, 0.3);
59
+ border-left: 2px solid #4f46e5;
60
+ border-right: 2px solid #4f46e5;
61
+ z-index: 5;
62
+ cursor: move;
63
+ }
64
+
65
+ .selection-handle {
66
+ position: absolute;
67
+ top: 0;
68
+ width: 10px;
69
+ height: 100%;
70
+ background-color: rgba(255, 255, 255, 0.8);
71
+ cursor: ew-resize;
72
+ z-index: 6;
73
+ }
74
+
75
+ .selection-handle-left {
76
+ left: -5px;
77
+ }
78
+
79
+ .selection-handle-right {
80
+ right: -5px;
81
+ }
82
+
83
  /* Custom scrollbar */
84
  ::-webkit-scrollbar {
85
  width: 8px;
 
119
  .recording-animation {
120
  animation: pulse 1.5s infinite;
121
  }
122
+
123
+ /* Tooltip styles */
124
+ .tooltip {
125
+ position: relative;
126
+ display: inline-block;
127
+ }
128
+
129
+ .tooltip .tooltiptext {
130
+ visibility: hidden;
131
+ width: 120px;
132
+ background-color: #555;
133
+ color: #fff;
134
+ text-align: center;
135
+ border-radius: 6px;
136
+ padding: 5px;
137
+ position: absolute;
138
+ z-index: 1;
139
+ bottom: 125%;
140
+ left: 50%;
141
+ margin-left: -60px;
142
+ opacity: 0;
143
+ transition: opacity 0.3s;
144
+ }
145
+
146
+ .tooltip:hover .tooltiptext {
147
+ visibility: visible;
148
+ opacity: 1;
149
+ }
150
+
151
+ /* Effect panel styles */
152
+ .effect-panel {
153
+ transition: all 0.3s ease;
154
+ max-height: 0;
155
+ overflow: hidden;
156
+ }
157
+
158
+ .effect-panel.open {
159
+ max-height: 500px;
160
+ padding: 1rem;
161
+ border: 1px solid #e5e7eb;
162
+ border-radius: 0.5rem;
163
+ margin-top: 0.5rem;
164
+ }
165
+
166
+ /* Track item styles */
167
+ .track-item {
168
+ transition: all 0.2s ease;
169
+ }
170
+
171
+ .track-item.active {
172
+ border-color: #4f46e5;
173
+ background-color: #f5f3ff;
174
+ }
175
+
176
+ /* Timeline ruler */
177
+ .timeline-ruler {
178
+ height: 30px;
179
+ background-color: #f3f4f6;
180
+ border-bottom: 1px solid #e5e7eb;
181
+ position: relative;
182
+ overflow: hidden;
183
+ }
184
+
185
+ .timeline-marker {
186
+ position: absolute;
187
+ bottom: 0;
188
+ height: 100%;
189
+ border-right: 1px solid #d1d5db;
190
+ }
191
+
192
+ .timeline-marker-label {
193
+ position: absolute;
194
+ bottom: 5px;
195
+ font-size: 0.75rem;
196
+ color: #6b7280;
197
+ }
198
  </style>
199
  </head>
200
  <body class="bg-gray-50 text-gray-800 font-sans">
 
204
  <div class="flex justify-between h-16 items-center">
205
  <div class="flex items-center">
206
  <i class="fas fa-wave-square text-2xl mr-2 text-indigo-300"></i>
207
+ <span class="text-xl font-bold">Waveform Pro</span>
208
  </div>
209
  <div class="hidden md:flex items-center space-x-8">
210
+ <a href="#" class="hover:text-indigo-200 transition">File</a>
211
+ <a href="#" class="hover:text-indigo-200 transition">Edit</a>
212
+ <a href="#" class="hover:text-indigo-200 transition">View</a>
213
+ <a href="#" class="hover:text-indigo-200 transition">Help</a>
214
  </div>
215
  <div class="flex items-center space-x-4">
216
+ <button class="px-4 py-2 rounded-md bg-indigo-700 hover:bg-indigo-600 transition">Save</button>
217
+ <button class="px-4 py-2 rounded-md bg-white text-indigo-900 hover:bg-gray-100 transition">Export</button>
218
  </div>
 
 
 
219
  </div>
220
  </div>
221
  </nav>
222
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  <!-- Main Editor Section -->
224
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
225
+ <div class="flex flex-col lg:flex-row gap-4">
226
  <!-- Left Sidebar - Tracks -->
227
+ <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-4">
228
+ <div class="flex justify-between items-center mb-4">
229
+ <h2 class="text-lg font-bold">Tracks</h2>
230
+ <button id="addTrackBtn" class="text-indigo-600 hover:text-indigo-800">
231
  <i class="fas fa-plus"></i> Add Track
232
  </button>
233
  </div>
234
 
235
+ <div id="tracksContainer" class="space-y-3">
236
+ <!-- Tracks will be added here dynamically -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
238
 
239
+ <div class="mt-4 pt-4 border-t border-gray-200">
240
+ <h3 class="font-medium mb-2">Master Track</h3>
241
+ <div class="flex items-center space-x-3">
242
  <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
243
  <i class="fas fa-sliders-h"></i>
244
  </div>
245
  <div class="flex-1">
246
+ <input type="range" min="0" max="100" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
 
 
247
  </div>
248
+ <span class="text-sm text-gray-500">-2.4dB</span>
249
  </div>
250
  </div>
251
  </div>
252
 
253
  <!-- Main Editor Area -->
254
+ <div class="lg:w-2/4 bg-white rounded-xl shadow-md p-4">
255
+ <!-- Timeline Ruler -->
256
+ <div class="timeline-ruler mb-2" id="timelineRuler">
257
+ <!-- Timeline markers will be added here -->
 
 
 
 
258
  </div>
259
 
260
+ <!-- Waveform Display -->
261
+ <div class="waveform-container mb-4 relative" id="mainWaveformContainer">
262
  <div class="waveform" id="mainWaveform"></div>
263
  <div class="playhead" id="mainPlayhead"></div>
264
+ <div class="selection-area hidden" id="selectionArea">
265
+ <div class="selection-handle selection-handle-left"></div>
266
+ <div class="selection-handle selection-handle-right"></div>
267
+ </div>
268
  </div>
269
 
270
+ <!-- Audio Clips -->
271
+ <div id="audioClipsContainer" class="bg-gray-50 rounded-lg p-3 mb-4 min-h-16">
272
+ <!-- Audio clips will be added here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
 
275
+ <!-- Transport Controls -->
276
  <div class="flex justify-between items-center">
277
+ <div class="flex space-x-3">
278
+ <button id="playBtn" class="w-12 h-12 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 flex items-center justify-center tooltip">
279
  <i class="fas fa-play"></i>
280
+ <span class="tooltiptext">Play (Space)</span>
281
  </button>
282
+ <button id="pauseBtn" class="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center tooltip">
283
  <i class="fas fa-pause"></i>
284
+ <span class="tooltiptext">Pause (Space)</span>
285
  </button>
286
+ <button id="stopBtn" class="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center tooltip">
287
  <i class="fas fa-stop"></i>
288
+ <span class="tooltiptext">Stop</span>
289
  </button>
290
+ <button id="loopBtn" class="w-12 h-12 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center tooltip">
291
  <i class="fas fa-redo"></i>
292
+ <span class="tooltiptext">Loop</span>
293
  </button>
294
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
 
296
+ <div class="flex items-center space-x-4">
297
+ <div class="flex items-center space-x-2">
298
+ <span class="text-sm text-gray-600">Speed:</span>
299
+ <input type="range" id="speedControl" min="50" max="200" value="100" class="w-24">
300
+ <span id="speedValue" class="text-sm font-medium w-10">1.0x</span>
 
 
 
 
301
  </div>
302
+ <div id="timeDisplay" class="text-gray-600">00:00:00 / 00:03:45</div>
303
  </div>
304
  </div>
305
 
306
+ <!-- Zoom Controls -->
307
+ <div class="mt-4 flex justify-between items-center">
308
+ <div class="flex space-x-2">
309
+ <button id="zoomInBtn" class="px-3 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-sm">
310
+ <i class="fas fa-search-plus"></i> Zoom In
311
+ </button>
312
+ <button id="zoomOutBtn" class="px-3 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-sm">
313
+ <i class="fas fa-search-minus"></i> Zoom Out
314
+ </button>
315
+ <button id="zoomFitBtn" class="px-3 py-1 rounded-md bg-gray-100 hover:bg-gray-200 text-sm">
316
+ <i class="fas fa-expand"></i> Fit to View
317
+ </button>
318
  </div>
319
+ <div class="text-sm text-gray-500">Zoom: <span id="zoomLevel">100%</span></div>
320
  </div>
321
  </div>
 
 
 
 
 
 
 
 
 
 
322
 
323
+ <!-- Right Sidebar - Tools & Effects -->
324
+ <div class="lg:w-1/4 bg-white rounded-xl shadow-md p-4">
325
+ <div class="flex justify-between items-center mb-4">
326
+ <h2 class="text-lg font-bold">Tools</h2>
 
 
 
327
  </div>
328
 
329
+ <div class="grid grid-cols-4 gap-2 mb-6">
330
+ <button id="selectTool" class="p-2 rounded-md bg-indigo-100 text-indigo-700 hover:bg-indigo-200 flex flex-col items-center tooltip">
331
+ <i class="fas fa-mouse-pointer mb-1"></i>
332
+ <span class="text-xs">Select</span>
333
+ <span class="tooltiptext">Selection Tool (V)</span>
334
+ </button>
335
+ <button id="cutTool" class="p-2 rounded-md bg-gray-100 hover:bg-gray-200 flex flex-col items-center tooltip">
336
+ <i class="fas fa-cut mb-1"></i>
337
+ <span class="text-xs">Cut</span>
338
+ <span class="tooltiptext">Cut Tool (C)</span>
339
+ </button>
340
+ <button id="trimTool" class="p-2 rounded-md bg-gray-100 hover:bg-gray-200 flex flex-col items-center tooltip">
341
+ <i class="fas fa-arrows-alt-h mb-1"></i>
342
+ <span class="text-xs">Trim</span>
343
+ <span class="tooltiptext">Trim Tool (T)</span>
344
+ </button>
345
+ <button id="fadeTool" class="p-2 rounded-md bg-gray-100 hover:bg-gray-200 flex flex-col items-center tooltip">
346
+ <i class="fas fa-wave-square mb-1"></i>
347
+ <span class="text-xs">Fade</span>
348
+ <span class="tooltiptext">Fade Tool (F)</span>
349
+ </button>
350
  </div>
351
 
352
+ <div class="mb-6">
353
+ <div class="flex justify-between items-center mb-3">
354
+ <h3 class="font-medium">Selected Region</h3>
355
+ <button id="clearSelectionBtn" class="text-xs text-indigo-600 hover:text-indigo-800">Clear</button>
356
  </div>
357
+ <div id="selectionInfo" class="text-sm text-gray-500 p-3 bg-gray-50 rounded-md">
358
+ No selection made
 
 
 
 
 
359
  </div>
360
+ <div class="mt-3 grid grid-cols-2 gap-2">
361
+ <button id="trimSelectionBtn" class="px-3 py-1 text-sm rounded-md bg-gray-100 hover:bg-gray-200">Trim</button>
362
+ <button id="deleteSelectionBtn" class="px-3 py-1 text-sm rounded-md bg-gray-100 hover:bg-gray-200">Delete</button>
363
+ <button id="fadeInBtn" class="px-3 py-1 text-sm rounded-md bg-gray-100 hover:bg-gray-200">Fade In</button>
364
+ <button id="fadeOutBtn" class="px-3 py-1 text-sm rounded-md bg-gray-100 hover:bg-gray-200">Fade Out</button>
 
 
365
  </div>
 
 
366
  </div>
367
 
368
+ <div>
369
+ <div class="flex justify-between items-center mb-3">
370
+ <h3 class="font-medium">Effects</h3>
371
+ <button id="addEffectBtn" class="text-xs text-indigo-600 hover:text-indigo-800">Add Effect</button>
372
+ </div>
373
+
374
+ <div id="effectsList" class="space-y-3">
375
+ <!-- Effects will be added here -->
376
  </div>
 
 
377
  </div>
378
  </div>
379
  </div>
380
  </div>
381
 
382
+ <!-- Effect Panel Template (hidden) -->
383
+ <div id="effectPanelTemplate" class="effect-panel hidden">
384
+ <div class="flex justify-between items-center mb-2">
385
+ <h4 class="font-medium">Effect Settings</h4>
386
+ <button class="text-gray-500 hover:text-gray-700 close-effect-panel">
387
+ <i class="fas fa-times"></i>
388
+ </button>
389
+ </div>
390
+ <div class="space-y-3">
391
+ <div>
392
+ <label class="block text-sm font-medium text-gray-700 mb-1">Parameter 1</label>
393
+ <input type="range" min="0" max="100" value="50" class="w-full">
394
+ </div>
395
+ <div>
396
+ <label class="block text-sm font-medium text-gray-700 mb-1">Parameter 2</label>
397
+ <input type="range" min="0" max="100" value="50" class="w-full">
398
  </div>
399
+ <button class="w-full py-1 text-sm rounded-md bg-red-100 text-red-700 hover:bg-red-200 remove-effect">
400
+ Remove Effect
401
+ </button>
402
  </div>
403
  </div>
404
 
405
+ <!-- Track Item Template (hidden) -->
406
+ <div id="trackItemTemplate" class="track-item border border-gray-200 rounded-lg p-3 hover:border-indigo-300 transition hidden">
407
+ <div class="flex justify-between items-center mb-2">
408
+ <span class="font-medium track-name">Track 1</span>
409
+ <div class="flex space-x-2">
410
+ <button class="text-gray-500 hover:text-indigo-600 toggle-mute">
411
+ <i class="fas fa-volume-up"></i>
412
+ </button>
413
+ <button class="text-gray-500 hover:text-indigo-600 toggle-solo">
414
+ <i class="fas fa-headphones"></i>
415
+ </button>
416
+ <button class="text-gray-500 hover:text-indigo-600 toggle-visibility">
417
+ <i class="fas fa-eye"></i>
418
+ </button>
419
+ <button class="text-gray-500 hover:text-indigo-600 delete-track">
420
+ <i class="fas fa-trash"></i>
421
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422
  </div>
423
  </div>
424
+ <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
425
+ <div class="h-full bg-indigo-500 volume-level w-3/4"></div>
426
+ </div>
427
+ <input type="range" min="-30" max="6" value="0" step="0.1" class="w-full mt-2 volume-slider">
428
+ <div class="text-xs text-gray-500 text-right mt-1 volume-db">0.0 dB</div>
429
+ </div>
430
+
431
+ <!-- Audio Clip Template (hidden) -->
432
+ <div id="audioClipTemplate" class="flex-shrink-0 h-16 rounded-md border border-gray-300 bg-white hover:border-indigo-400 transition relative hidden">
433
+ <div class="absolute inset-0 flex items-center justify-start pl-2 overflow-hidden">
434
+ <span class="text-sm truncate audio-clip-name">Audio Clip</span>
435
+ </div>
436
+ <div class="absolute top-0 right-0 p-1">
437
+ <button class="text-gray-500 hover:text-indigo-600 text-xs delete-clip">
438
+ <i class="fas fa-times"></i>
439
+ </button>
440
+ </div>
441
+ <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-100">
442
+ <div class="h-full bg-indigo-400 audio-clip-waveform"></div>
443
+ </div>
444
+ </div>
445
 
446
  <script>
447
+ // Global variables
448
+ let currentTool = 'select';
449
+ let isPlaying = false;
450
+ let currentTime = 0;
451
+ let totalDuration = 225; // 3:45 in seconds
452
+ let zoomLevel = 100;
453
+ let selectionStart = 0;
454
+ let selectionEnd = 0;
455
+ let hasSelection = false;
456
+ let trackCount = 0;
457
+ let clipCount = 0;
458
+
459
+ // DOM elements
460
+ const mainWaveformContainer = document.getElementById('mainWaveformContainer');
461
+ const selectionArea = document.getElementById('selectionArea');
462
+ const selectionInfo = document.getElementById('selectionInfo');
463
+ const timeDisplay = document.getElementById('timeDisplay');
464
+ const zoomLevelDisplay = document.getElementById('zoomLevel');
465
+ const speedControl = document.getElementById('speedControl');
466
+ const speedValue = document.getElementById('speedValue');
467
 
468
+ // Initialize the application
469
+ document.addEventListener('DOMContentLoaded', function() {
470
+ // Generate demo waveform
471
+ generateWaveform('mainWaveform', 500);
472
+
473
+ // Create timeline markers
474
+ createTimelineMarkers();
475
+
476
+ // Add event listeners
477
+ setupEventListeners();
478
+
479
+ // Add a couple of demo tracks
480
+ addTrack('Vocals');
481
+ addTrack('Guitar');
482
+ addTrack('Drums');
483
+
484
+ // Add some demo audio clips
485
+ addAudioClip('Vocals', 'Verse 1', 0, 30);
486
+ addAudioClip('Vocals', 'Chorus', 30, 45);
487
+ addAudioClip('Guitar', 'Rhythm', 0, 45);
488
+ addAudioClip('Drums', 'Drum Loop', 0, 45);
489
+
490
+ // Start the playhead animation
491
+ animatePlayhead();
492
+
493
+ // Update time display
494
+ updateTimeDisplay();
495
+ });
496
+
497
+ // Generate waveform visualization
498
+ function generateWaveform(elementId, barCount) {
499
  const container = document.getElementById(elementId);
500
  container.innerHTML = '';
501
 
502
+ for (let i = 0; i < barCount; i++) {
503
  const bar = document.createElement('div');
504
  bar.className = 'waveform-bar';
505
+
506
+ // Create a more interesting waveform pattern
507
+ const pos = i / barCount;
508
+ let height;
509
+
510
+ if (pos < 0.2) {
511
+ // Intro section - quieter
512
+ height = 20 + Math.sin(pos * 20) * 15 + Math.random() * 10;
513
+ } else if (pos > 0.8) {
514
+ // Outro section - quieter
515
+ height = 20 + Math.sin(pos * 25) * 10 + Math.random() * 8;
516
+ } else {
517
+ // Main section - louder with more variation
518
+ height = 40 + Math.sin(pos * 50) * 30 + Math.random() * 15;
519
+
520
+ // Add some "peaks"
521
+ if (Math.random() > 0.95) {
522
+ height += 30;
523
+ }
524
+ }
525
+
526
+ // Ensure height is within bounds
527
+ height = Math.max(5, Math.min(100, height));
528
+
529
  bar.style.height = `${height}%`;
530
  container.appendChild(bar);
531
+ }
532
  }
533
 
534
+ // Create timeline markers
535
+ function createTimelineMarkers() {
536
+ const ruler = document.getElementById('timelineRuler');
537
+ ruler.innerHTML = '';
 
538
 
539
+ const totalWidth = ruler.offsetWidth;
540
+ const totalSeconds = totalDuration;
541
+ const pixelsPerSecond = totalWidth / (totalSeconds * (zoomLevel / 100));
542
+
543
+ // Add markers every 5 seconds
544
+ for (let seconds = 0; seconds <= totalSeconds; seconds += 5) {
545
+ const marker = document.createElement('div');
546
+ marker.className = 'timeline-marker';
547
+ marker.style.left = `${seconds * pixelsPerSecond}px`;
548
+
549
+ // Add label for every 15 seconds
550
+ if (seconds % 15 === 0) {
551
+ const label = document.createElement('div');
552
+ label.className = 'timeline-marker-label';
553
+ label.style.left = `${seconds * pixelsPerSecond + 2}px`;
554
+ label.textContent = formatTime(seconds);
555
+ ruler.appendChild(label);
556
+ }
557
+
558
+ ruler.appendChild(marker);
559
+ }
560
+ }
561
+
562
+ // Format time as MM:SS
563
+ function formatTime(seconds) {
564
+ const mins = Math.floor(seconds / 60);
565
+ const secs = Math.floor(seconds % 60);
566
+ return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
567
+ }
568
+
569
+ // Format time as HH:MM:SS
570
+ function formatTimeLong(seconds) {
571
+ const hours = Math.floor(seconds / 3600);
572
+ const mins = Math.floor((seconds % 3600) / 60);
573
+ const secs = Math.floor(seconds % 60);
574
+ return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
575
+ }
576
+
577
+ // Update the time display
578
+ function updateTimeDisplay() {
579
+ timeDisplay.textContent = `${formatTimeLong(currentTime)} / ${formatTimeLong(totalDuration)}`;
580
+ }
581
+
582
+ // Animate the playhead
583
+ function animatePlayhead() {
584
+ const playhead = document.getElementById('mainPlayhead');
585
+ const container = document.getElementById('mainWaveformContainer');
586
+
587
+ function updatePlayheadPosition() {
588
+ if (isPlaying) {
589
+ currentTime += 0.1 * (parseInt(speedControl.value) / 100);
590
+
591
+ if (currentTime > totalDuration) {
592
+ currentTime = 0;
593
+ if (!document.getElementById('loopBtn').classList.contains('bg-indigo-100')) {
594
+ isPlaying = false;
595
+ document.getElementById('playBtn').classList.remove('bg-indigo-600');
596
+ document.getElementById('playBtn').classList.add('bg-gray-200');
597
+ }
598
+ }
599
+
600
+ updateTimeDisplay();
601
  }
602
+
603
+ const percentage = (currentTime / totalDuration) * 100;
604
+ playhead.style.left = `${percentage}%`;
605
+
606
+ requestAnimationFrame(updatePlayheadPosition);
607
  }
608
 
609
+ updatePlayheadPosition();
610
  }
611
 
612
+ // Setup event listeners
613
+ function setupEventListeners() {
614
+ // Tool buttons
615
+ document.getElementById('selectTool').addEventListener('click', () => setActiveTool('select'));
616
+ document.getElementById('cutTool').addEventListener('click', () => setActiveTool('cut'));
617
+ document.getElementById('trimTool').addEventListener('click', () => setActiveTool('trim'));
618
+ document.getElementById('fadeTool').addEventListener('click', () => setActiveTool('fade'));
619
+
620
+ // Transport controls
621
+ document.getElementById('playBtn').addEventListener('click', togglePlay);
622
+ document.getElementById('pauseBtn').addEventListener('click', togglePlay);
623
+ document.getElementById('stopBtn').addEventListener('click', stopPlayback);
624
+ document.getElementById('loopBtn').addEventListener('click', toggleLoop);
625
+
626
+ // Zoom controls
627
+ document.getElementById('zoomInBtn').addEventListener('click', () => adjustZoom(10));
628
+ document.getElementById('zoomOutBtn').addEventListener('click', () => adjustZoom(-10));
629
+ document.getElementById('zoomFitBtn').addEventListener('click', fitToView);
630
+
631
+ // Speed control
632
+ speedControl.addEventListener('input', updateSpeed);
633
+
634
+ // Selection controls
635
+ document.getElementById('clearSelectionBtn').addEventListener('click', clearSelection);
636
+ document.getElementById('trimSelectionBtn').addEventListener('click', trimSelection);
637
+ document.getElementById('deleteSelectionBtn').addEventListener('click', deleteSelection);
638
+ document.getElementById('fadeInBtn').addEventListener('click', () => applyFade('in'));
639
+ document.getElementById('fadeOutBtn').addEventListener('click', () => applyFade('out'));
640
+
641
+ // Track controls
642
+ document.getElementById('addTrackBtn').addEventListener('click', () => addTrack(`Track ${trackCount + 1}`));
643
+
644
+ // Effect controls
645
+ document.getElementById('addEffectBtn').addEventListener('click', addEffect);
646
+
647
+ // Waveform interaction
648
+ mainWaveformContainer.addEventListener('mousedown', handleWaveformMouseDown);
649
+ mainWaveformContainer.addEventListener('mousemove', handleWaveformMouseMove);
650
+ mainWaveformContainer.addEventListener('mouseup', handleWaveformMouseUp);
651
+ mainWaveformContainer.addEventListener('mouseleave', handleWaveformMouseUp);
652
+
653
+ // Keyboard shortcuts
654
+ document.addEventListener('keydown', handleKeyboardShortcuts);
655
+ }
656
+
657
+ // Set active tool
658
+ function setActiveTool(tool) {
659
+ currentTool = tool;
660
+
661
+ // Update UI
662
+ document.getElementById('selectTool').classList.remove('bg-indigo-100', 'text-indigo-700');
663
+ document.getElementById('cutTool').classList.remove('bg-indigo-100', 'text-indigo-700');
664
+ document.getElementById('trimTool').classList.remove('bg-indigo-100', 'text-indigo-700');
665
+ document.getElementById('fadeTool').classList.remove('bg-indigo-100', 'text-indigo-700');
666
+
667
+ document.getElementById(`${tool}Tool`).classList.add('bg-indigo-100', 'text-indigo-700');
668
+
669
+ // Change cursor based on tool
670
+ switch(tool) {
671
+ case 'select':
672
+ mainWaveformContainer.style.cursor = 'default';
673
+ break;
674
+ case 'cut':
675
+ mainWaveformContainer.style.cursor = 'crosshair';
676
+ break;
677
+ case 'trim':
678
+ mainWaveformContainer.style.cursor = 'col-resize';
679
+ break;
680
+ case 'fade':
681
+ mainWaveformContainer.style.cursor = 'pointer';
682
+ break;
683
+ }
684
+ }
685
+
686
+ // Toggle play/pause
687
+ function togglePlay() {
688
+ isPlaying = !isPlaying;
689
+
690
+ if (isPlaying) {
691
+ document.getElementById('playBtn').classList.remove('bg-gray-200');
692
+ document.getElementById('playBtn').classList.add('bg-indigo-600');
693
+ document.getElementById('pauseBtn').classList.remove('bg-indigo-600');
694
+ document.getElementById('pauseBtn').classList.add('bg-gray-200');
695
+ } else {
696
+ document.getElementById('playBtn').classList.remove('bg-indigo-600');
697
+ document.getElementById('playBtn').classList.add('bg-gray-200');
698
+ document.getElementById('pauseBtn').classList.remove('bg-gray-200');
699
+ document.getElementById('pauseBtn').classList.add('bg-indigo-600');
700
+ }
701
+ }
702
+
703
+ // Stop playback
704
+ function stopPlayback() {
705
+ isPlaying = false;
706
+ currentTime = 0;
707
+ updateTimeDisplay();
708
+
709
+ document.getElementById('playBtn').classList.remove('bg-indigo-600');
710
+ document.getElementById('playBtn').classList.add('bg-gray-200');
711
+ document.getElementById('pauseBtn').classList.remove('bg-indigo-600');
712
+ document.getElementById('pauseBtn').classList.add('bg-gray-200');
713
+ }
714
+
715
+ // Toggle loop
716
+ function toggleLoop() {
717
+ const loopBtn = document.getElementById('loopBtn');
718
+ loopBtn.classList.toggle('bg-indigo-100');
719
+ loopBtn.classList.toggle('text-indigo-700');
720
+ }
721
+
722
+ // Adjust zoom level
723
+ function adjustZoom(amount) {
724
+ zoomLevel = Math.max(50, Math.min(200, zoomLevel + amount));
725
+ zoomLevelDisplay.textContent = `${zoomLevel}%`;
726
+
727
+ // In a real app, this would adjust the waveform display
728
+ createTimelineMarkers();
729
+ }
730
+
731
+ // Fit to view
732
+ function fitToView() {
733
+ zoomLevel = 100;
734
+ zoomLevelDisplay.textContent = `${zoomLevel}%`;
735
+
736
+ // In a real app, this would adjust the waveform display
737
+ createTimelineMarkers();
738
+ }
739
+
740
+ // Update playback speed
741
+ function updateSpeed() {
742
+ const speed = parseInt(speedControl.value);
743
+ speedValue.textContent = `${(speed / 100).toFixed(1)}x`;
744
+ }
745
+
746
+ // Handle waveform mouse down
747
+ function handleWaveformMouseDown(e) {
748
+ if (currentTool === 'select' || currentTool === 'cut') {
749
+ const rect = mainWaveformContainer.getBoundingClientRect();
750
+ const x = e.clientX - rect.left;
751
+ const percentage = (x / rect.width) * 100;
752
+
753
+ selectionStart = percentage;
754
+ selectionEnd = percentage;
755
+
756
+ selectionArea.style.left = `${percentage}%`;
757
+ selectionArea.style.width = '0';
758
+ selectionArea.classList.remove('hidden');
759
+
760
+ hasSelection = true;
761
+ updateSelectionInfo();
762
+ }
763
+ }
764
+
765
+ // Handle waveform mouse move
766
+ function handleWaveformMouseMove(e) {
767
+ if (hasSelection && (currentTool === 'select' || currentTool === 'cut')) {
768
+ const rect = mainWaveformContainer.getBoundingClientRect();
769
+ const x = e.clientX - rect.left;
770
+ const percentage = (x / rect.width) * 100;
771
+
772
+ selectionEnd = percentage;
773
+
774
+ if (percentage > selectionStart) {
775
+ selectionArea.style.left = `${selectionStart}%`;
776
+ selectionArea.style.width = `${percentage - selectionStart}%`;
777
  } else {
778
+ selectionArea.style.left = `${percentage}%`;
779
+ selectionArea.style.width = `${selectionStart - percentage}%`;
780
+ }
781
+
782
+ updateSelectionInfo();
783
+ }
784
+ }
785
+
786
+ // Handle waveform mouse up
787
+ function handleWaveformMouseUp() {
788
+ if (currentTool === 'cut' && hasSelection) {
789
+ // In a real app, this would cut the audio at the selection points
790
+ console.log(`Cut audio from ${selectionStart}% to ${selectionEnd}%`);
791
+ }
792
+
793
+ hasSelection = false;
794
+ }
795
+
796
+ // Update selection info display
797
+ function updateSelectionInfo() {
798
+ const startTime = (selectionStart / 100) * totalDuration;
799
+ const endTime = (selectionEnd / 100) * totalDuration;
800
+ const duration = Math.abs(endTime - startTime);
801
+
802
+ selectionInfo.innerHTML = `
803
+ Start: <strong>${formatTimeLong(startTime)}</strong><br>
804
+ End: <strong>${formatTimeLong(endTime)}</strong><br>
805
+ Duration: <strong>${formatTimeLong(duration)}</strong>
806
+ `;
807
+ }
808
+
809
+ // Clear selection
810
+ function clearSelection() {
811
+ selectionArea.classList.add('hidden');
812
+ selectionInfo.textContent = 'No selection made';
813
+ selectionStart = 0;
814
+ selectionEnd = 0;
815
+ }
816
+
817
+ // Trim selection
818
+ function trimSelection() {
819
+ if (selectionStart === 0 && selectionEnd === 0) return;
820
+
821
+ // In a real app, this would trim the audio to the selected region
822
+ console.log(`Trim audio to ${selectionStart}% - ${selectionEnd}%`);
823
+ alert(`Audio trimmed to selected region (${formatTimeLong((selectionStart / 100) * totalDuration)} - ${formatTimeLong((selectionEnd / 100) * totalDuration)})`);
824
+
825
+ clearSelection();
826
+ }
827
+
828
+ // Delete selection
829
+ function deleteSelection() {
830
+ if (selectionStart === 0 && selectionEnd === 0) return;
831
+
832
+ // In a real app, this would delete the selected region
833
+ console.log(`Delete audio from ${selectionStart}% to ${selectionEnd}%`);
834
+ alert(`Deleted selected audio region (${formatTimeLong((selectionStart / 100) * totalDuration)} - ${formatTimeLong((selectionEnd / 100) * totalDuration)})`);
835
+
836
+ clearSelection();
837
+ }
838
+
839
+ // Apply fade effect
840
+ function applyFade(type) {
841
+ if (selectionStart === 0 && selectionEnd === 0) return;
842
+
843
+ // In a real app, this would apply a fade to the selected region
844
+ console.log(`Apply ${type} fade to ${selectionStart}% - ${selectionEnd}%`);
845
+ alert(`Applied ${type} fade to selected region`);
846
+
847
+ clearSelection();
848
+ }
849
+
850
+ // Add a new track
851
+ function addTrack(name) {
852
+ trackCount++;
853
+
854
+ const template = document.getElementById('trackItemTemplate');
855
+ const clone = template.cloneNode(true);
856
+ clone.id = `track-${trackCount}`;
857
+ clone.classList.remove('hidden');
858
+
859
+ const trackName = clone.querySelector('.track-name');
860
+ trackName.textContent = name;
861
+
862
+ // Set up event listeners for the new track
863
+ clone.querySelector('.toggle-mute').addEventListener('click', function() {
864
+ this.classList.toggle('text-red-500');
865
+ console.log(`Toggle mute for ${name}`);
866
+ });
867
+
868
+ clone.querySelector('.toggle-solo').addEventListener('click', function() {
869
+ this.classList.toggle('text-indigo-600');
870
+ console.log(`Toggle solo for ${name}`);
871
+ });
872
+
873
+ clone.querySelector('.toggle-visibility').addEventListener('click', function() {
874
+ this.classList.toggle('text-gray-500');
875
+ this.classList.toggle('text-indigo-600');
876
+ console.log(`Toggle visibility for ${name}`);
877
+ });
878
+
879
+ clone.querySelector('.delete-track').addEventListener('click', function() {
880
+ if (confirm(`Delete track "${name}"?`)) {
881
+ clone.remove();
882
+ console.log(`Deleted track ${name}`);
883
  }
884
  });
885
 
886
+ const volumeSlider = clone.querySelector('.volume-slider');
887
+ const volumeLevel = clone.querySelector('.volume-level');
888
+ const volumeDb = clone.querySelector('.volume-db');
889
+
890
+ volumeSlider.addEventListener('input', function() {
891
+ const value = parseFloat(this.value);
892
+ const percentage = ((value + 30) / 36) * 100;
893
+ volumeLevel.style.width = `${percentage}%`;
894
+ volumeDb.textContent = `${value.toFixed(1)} dB`;
895
+
896
+ // In a real app, this would adjust the track volume
897
+ console.log(`Set volume for ${name} to ${value} dB`);
898
+ });
899
+
900
+ // Add to tracks container
901
+ document.getElementById('tracksContainer').appendChild(clone);
902
+ }
903
+
904
+ // Add an audio clip to a track
905
+ function addAudioClip(trackName, clipName, startTime, duration) {
906
+ clipCount++;
907
+
908
+ const template = document.getElementById('audioClipTemplate');
909
+ const clone = template.cloneNode(true);
910
+ clone.id = `clip-${clipCount}`;
911
+ clone.classList.remove('hidden');
912
+
913
+ const nameElement = clone.querySelector('.audio-clip-name');
914
+ nameElement.textContent = clipName;
915
+
916
+ // Position the clip based on start time and duration
917
+ const containerWidth = document.getElementById('audioClipsContainer').offsetWidth;
918
+ const totalSeconds = totalDuration;
919
+ const pixelsPerSecond = containerWidth / (totalSeconds * (zoomLevel / 100));
920
+
921
+ clone.style.width = `${duration * pixelsPerSecond}px`;
922
+ clone.style.left = `${startTime * pixelsPerSecond}px`;
923
+
924
+ // Generate a mini waveform for the clip
925
+ const waveformElement = clone.querySelector('.audio-clip-waveform');
926
+ generateMiniWaveform(waveformElement, duration * 10);
927
+
928
+ // Set up event listeners for the clip
929
+ clone.addEventListener('click', function() {
930
+ // Select this clip
931
+ document.querySelectorAll('#audioClipsContainer > div').forEach(c => {
932
+ c.classList.remove('border-indigo-500', 'bg-indigo-50');
933
  });
934
+ this.classList.add('border-indigo-500', 'bg-indigo-50');
935
+
936
+ console.log(`Selected clip: ${clipName}`);
937
  });
938
+
939
+ clone.querySelector('.delete-clip').addEventListener('click', function(e) {
940
+ e.stopPropagation();
941
+ if (confirm(`Delete clip "${clipName}"?`)) {
942
+ clone.remove();
943
+ console.log(`Deleted clip ${clipName}`);
944
+ }
945
+ });
946
+
947
+ // Add to audio clips container
948
+ document.getElementById('audioClipsContainer').appendChild(clone);
949
+ }
950
+
951
+ // Generate a mini waveform for a clip
952
+ function generateMiniWaveform(element, barCount) {
953
+ element.innerHTML = '';
954
+
955
+ for (let i = 0; i < barCount; i++) {
956
+ const bar = document.createElement('div');
957
+ bar.className = 'inline-block h-full w-px bg-indigo-500';
958
+
959
+ const height = 20 + Math.sin(i / 3) * 15 + Math.random() * 10;
960
+ bar.style.height = `${height}%`;
961
+ element.appendChild(bar);
962
+ }
963
+ }
964
+
965
+ // Add an effect
966
+ function addEffect() {
967
+ const effectName = prompt("Enter effect name:");
968
+ if (!effectName) return;
969
+
970
+ const effectsList = document.getElementById('effectsList');
971
+
972
+ const effectItem = document.createElement('div');
973
+ effectItem.className = 'effect-card bg-gray-50 rounded-lg p-3 border border-gray-200 transition cursor-pointer';
974
+
975
+ effectItem.innerHTML = `
976
+ <div class="flex justify-between items-center">
977
+ <div class="flex items-center space-x-3">
978
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
979
+ <i class="fas fa-sliders-h"></i>
980
+ </div>
981
+ <div>
982
+ <h3 class="font-medium">${effectName}</h3>
983
+ <p class="text-xs text-gray-500">Click to edit settings</p>
984
+ </div>
985
+ </div>
986
+ <button class="text-gray-500 hover:text-red-500 delete-effect">
987
+ <i class="fas fa-times"></i>
988
+ </button>
989
+ </div>
990
+ <div class="effect-panel mt-2" id="effect-panel-${effectName.toLowerCase().replace(' ', '-')}">
991
+ <!-- Effect panel content will be added here -->
992
+ </div>
993
+ `;
994
+
995
+ // Set up event listeners
996
+ effectItem.querySelector('.delete-effect').addEventListener('click', function(e) {
997
+ e.stopPropagation();
998
+ if (confirm(`Remove effect "${effectName}"?`)) {
999
+ effectItem.remove();
1000
+ console.log(`Removed effect ${effectName}`);
1001
+ }
1002
+ });
1003
+
1004
+ effectItem.addEventListener('click', function() {
1005
+ const panel = this.querySelector('.effect-panel');
1006
+ const template = document.getElementById('effectPanelTemplate');
1007
+
1008
+ if (!panel.innerHTML.trim()) {
1009
+ const panelClone = template.cloneNode(true);
1010
+ panelClone.classList.remove('hidden');
1011
+ panelClone.classList.add('open');
1012
+ panelClone.id = '';
1013
+
1014
+ // Update panel title
1015
+ panelClone.querySelector('h4').textContent = `${effectName} Settings`;
1016
+
1017
+ // Set up close button
1018
+ panelClone.querySelector('.close-effect-panel').addEventListener('click', function(e) {
1019
+ e.stopPropagation();
1020
+ panelClone.classList.remove('open');
1021
+ });
1022
+
1023
+ // Set up remove button
1024
+ panelClone.querySelector('.remove-effect').addEventListener('click', function(e) {
1025
+ e.stopPropagation();
1026
+ if (confirm(`Remove effect "${effectName}"?`)) {
1027
+ effectItem.remove();
1028
+ console.log(`Removed effect ${effectName}`);
1029
+ }
1030
+ });
1031
+
1032
+ panel.appendChild(panelClone);
1033
+ } else {
1034
+ panel.querySelector('.effect-panel').classList.toggle('open');
1035
+ }
1036
+ });
1037
+
1038
+ effectsList.appendChild(effectItem);
1039
+ }
1040
+
1041
+ // Handle keyboard shortcuts
1042
+ function handleKeyboardShortcuts(e) {
1043
+ // Space to play/pause
1044
+ if (e.code === 'Space') {
1045
+ e.preventDefault();
1046
+ togglePlay();
1047
+ }
1048
+
1049
+ // Tool shortcuts
1050
+ if (e.key === 'v') setActiveTool('select');
1051
+ if (e.key === 'c') setActiveTool('cut');
1052
+ if (e.key === 't') setActiveTool('trim');
1053
+ if (e.key === 'f') setActiveTool('fade');
1054
+
1055
+ // Zoom shortcuts
1056
+ if (e.ctrlKey && e.key === '+') adjustZoom(10);
1057
+ if (e.ctrlKey && e.key === '-') adjustZoom(-10);
1058
+ if (e.ctrlKey && e.key === '0') fitToView();
1059
+
1060
+ // Playback control
1061
+ if (e.key === 'l') toggleLoop();
1062
+ if (e.key === 's') stopPlayback();
1063
+ }
1064
  </script>
1065
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MrEzzat/audio-edititng" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1066
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Create a SaaS application that is used for audio editing features
 
 
1
+ Create a SaaS application that is used for audio editing features
2
+ implement the audio editing ui and functionalities like trimming, speed control etc