Hugging Face's logo

Spaces:
batnyan
/
musicsong
Running

App Files Community
batnyan commited on
Commit
fed7f84
·
verified ·
1 Parent(s): 7d81629

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +493 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Musicsong
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: musicsong
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,493 @@
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>LyricWave - Text to Music Maker</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
15
+ min-height: 100vh;
16
+ color: #e2e8f0;
17
+ }
18
+
19
+ .gradient-bg {
20
+ background: linear-gradient(45deg, #6e45e2 0%, #89d4cf 100%);
21
+ }
22
+
23
+ .music-note {
24
+ animation: float 3s ease-in-out infinite;
25
+ }
26
+
27
+ @keyframes float {
28
+ 0%, 100% {
29
+ transform: translateY(0);
30
+ }
31
+ 50% {
32
+ transform: translateY(-10px);
33
+ }
34
+ }
35
+
36
+ .piano-key {
37
+ transition: all 0.1s ease;
38
+ }
39
+
40
+ .piano-key.active {
41
+ transform: translateY(2px);
42
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
43
+ }
44
+
45
+ .lyric-line.active {
46
+ color: #6e45e2;
47
+ font-weight: 600;
48
+ transform: scale(1.02);
49
+ }
50
+
51
+ .waveform {
52
+ height: 80px;
53
+ background: rgba(255,255,255,0.1);
54
+ border-radius: 8px;
55
+ position: relative;
56
+ overflow: hidden;
57
+ }
58
+
59
+ .waveform::after {
60
+ content: '';
61
+ position: absolute;
62
+ top: 0;
63
+ left: 0;
64
+ right: 0;
65
+ bottom: 0;
66
+ background: linear-gradient(90deg, rgba(110,69,226,0.6) 0%, rgba(137,212,207,0.6) 100%);
67
+ animation: wave 2s linear infinite;
68
+ transform-origin: 0 50%;
69
+ z-index: 1;
70
+ }
71
+
72
+ @keyframes wave {
73
+ 0% {
74
+ transform: scaleX(0);
75
+ opacity: 0;
76
+ }
77
+ 50% {
78
+ opacity: 0.8;
79
+ }
80
+ 100% {
81
+ transform: scaleX(1);
82
+ opacity: 0;
83
+ }
84
+ }
85
+ </style>
86
+ </head>
87
+ <body class="min-h-screen flex flex-col">
88
+ <header class="gradient-bg text-white py-6 shadow-lg">
89
+ <div class="container mx-auto px-4 flex justify-between items-center">
90
+ <div class="flex items-center space-x-2">
91
+ <i class="fas fa-music text-3xl music-note"></i>
92
+ <h1 class="text-2xl font-bold">LyricWave</h1>
93
+ </div>
94
+ <nav>
95
+ <ul class="flex space-x-6">
96
+ <li><a href="#" class="hover:text-gray-200 transition">Home</a></li>
97
+ <li><a href="#" class="hover:text-gray-200 transition">Tutorial</a></li>
98
+ <li><a href="#" class="hover:text-gray-200 transition">Community</a></li>
99
+ <li><a href="#" class="hover:text-gray-200 transition">Premium</a></li>
100
+ </ul>
101
+ </nav>
102
+ </div>
103
+ </header>
104
+
105
+ <main class="flex-grow container mx-auto px-4 py-8">
106
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
107
+ <!-- Left Column - Lyrics Input -->
108
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
109
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
110
+ <i class="fas fa-pen-alt mr-2"></i> Lyrics Editor
111
+ </h2>
112
+ <div class="mb-4">
113
+ <label class="block text-sm font-medium mb-2" for="song-title">Song Title</label>
114
+ <input type="text" id="song-title" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter song title">
115
+ </div>
116
+ <div class="mb-4">
117
+ <label class="block text-sm font-medium mb-2" for="song-artist">Artist</label>
118
+ <input type="text" id="song-artist" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter artist name">
119
+ </div>
120
+ <div class="mb-4">
121
+ <label class="block text-sm font-medium mb-2" for="song-lyrics">Lyrics</label>
122
+ <textarea id="song-lyrics" rows="12" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Enter your lyrics here (separate verses with empty lines)"></textarea>
123
+ </div>
124
+ <div class="flex space-x-4">
125
+ <button id="generate-btn" class="gradient-bg text-white px-6 py-2 rounded-lg font-medium hover:opacity-90 transition flex items-center">
126
+ <i class="fas fa-magic mr-2"></i> Generate Music
127
+ </button>
128
+ <button id="clear-btn" class="bg-gray-700 text-white px-6 py-2 rounded-lg font-medium hover:bg-gray-600 transition">
129
+ Clear
130
+ </button>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Right Column - Music Controls -->
135
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
136
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
137
+ <i class="fas fa-sliders-h mr-2"></i> Music Settings
138
+ </h2>
139
+
140
+ <div class="mb-6">
141
+ <label class="block text-sm font-medium mb-2">Genre</label>
142
+ <div class="grid grid-cols-3 gap-2">
143
+ <button class="genre-btn bg-gray-700 hover:bg-purple-600 px-4 py-2 rounded-lg transition" data-genre="pop">Pop</button>
144
+ <button class="genre-btn bg-gray-700 hover:bg-blue-600 px-4 py-2 rounded-lg transition" data-genre="rock">Rock</button>
145
+ <button class="genre-btn bg-gray-700 hover:bg-green-600 px-4 py-2 rounded-lg transition" data-genre="hiphop">Hip Hop</button>
146
+ <button class="genre-btn bg-gray-700 hover:bg-red-600 px-4 py-2 rounded-lg transition" data-genre="electronic">Electronic</button>
147
+ <button class="genre-btn bg-gray-700 hover:bg-yellow-600 px-4 py-2 rounded-lg transition" data-genre="jazz">Jazz</button>
148
+ <button class="genre-btn bg-gray-700 hover:bg-pink-600 px-4 py-2 rounded-lg transition" data-genre="r&b">R&B</button>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="mb-6">
153
+ <label class="block text-sm font-medium mb-2">Tempo</label>
154
+ <input type="range" id="tempo-slider" min="60" max="180" value="120" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
155
+ <div class="flex justify-between text-xs mt-1">
156
+ <span>Slow</span>
157
+ <span id="tempo-value">120 BPM</span>
158
+ <span>Fast</span>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="mb-6">
163
+ <label class="block text-sm font-medium mb-2">Mood</label>
164
+ <div class="grid grid-cols-3 gap-2">
165
+ <button class="mood-btn bg-gray-700 hover:bg-blue-400 px-4 py-2 rounded-lg transition" data-mood="happy">Happy</button>
166
+ <button class="mood-btn bg-gray-700 hover:bg-indigo-400 px-4 py-2 rounded-lg transition" data-mood="sad">Sad</button>
167
+ <button class="mood-btn bg-gray-700 hover:bg-green-400 px-4 py-2 rounded-lg transition" data-mood="energetic">Energetic</button>
168
+ <button class="mood-btn bg-gray-700 hover:bg-red-400 px-4 py-2 rounded-lg transition" data-mood="romantic">Romantic</button>
169
+ <button class="mood-btn bg-gray-700 hover:bg-yellow-400 px-4 py-2 rounded-lg transition" data-mood="chill">Chill</button>
170
+ <button class="mood-btn bg-gray-700 hover:bg-purple-400 px-4 py-2 rounded-lg transition" data-mood="mysterious">Mysterious</button>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="mb-6">
175
+ <label class="block text-sm font-medium mb-2">Instrumentation</label>
176
+ <div class="flex flex-wrap gap-2">
177
+ <button class="instrument-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition flex items-center" data-instrument="piano">
178
+ <i class="fas fa-piano-keyboard mr-1"></i> Piano
179
+ </button>
180
+ <button class="instrument-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition flex items-center" data-instrument="guitar">
181
+ <i class="fas fa-guitar mr-1"></i> Guitar
182
+ </button>
183
+ <button class="instrument-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition flex items-center" data-instrument="drums">
184
+ <i class="fas fa-drum mr-1"></i> Drums
185
+ </button>
186
+ <button class="instrument-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition flex items-center" data-instrument="bass">
187
+ <i class="fas fa-music mr-1"></i> Bass
188
+ </button>
189
+ <button class="instrument-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition flex items-center" data-instrument="strings">
190
+ <i class="fas fa-violin mr-1"></i> Strings
191
+ </button>
192
+ <button class="instrument-btn bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition flex items-center" data-instrument="synth">
193
+ <i class="fas fa-sliders-h mr-1"></i> Synth
194
+ </button>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="waveform mb-4"></div>
199
+
200
+ <div class="flex justify-center space-x-4">
201
+ <button id="play-btn" class="bg-green-600 hover:bg-green-700 text-white p-3 rounded-full transition">
202
+ <i class="fas fa-play"></i>
203
+ </button>
204
+ <button id="pause-btn" class="bg-yellow-600 hover:bg-yellow-700 text-white p-3 rounded-full transition">
205
+ <i class="fas fa-pause"></i>
206
+ </button>
207
+ <button id="stop-btn" class="bg-red-600 hover:bg-red-700 text-white p-3 rounded-full transition">
208
+ <i class="fas fa-stop"></i>
209
+ </button>
210
+ <button id="download-btn" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full transition">
211
+ <i class="fas fa-download"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Generated Song Display -->
218
+ <div id="song-display" class="mt-8 bg-gray-800 rounded-xl p-6 shadow-lg hidden">
219
+ <div class="flex justify-between items-center mb-4">
220
+ <h2 class="text-xl font-semibold flex items-center">
221
+ <i class="fas fa-compact-disc mr-2"></i>
222
+ <span id="display-title">Your Generated Song</span>
223
+ </h2>
224
+ <div class="text-sm text-gray-400" id="display-settings">Genre: Pop • Tempo: 120 BPM • Mood: Happy</div>
225
+ </div>
226
+
227
+ <div class="bg-gray-900 rounded-lg p-4">
228
+ <div id="lyrics-display" class="text-center space-y-4">
229
+ <!-- Lyrics will be displayed here -->
230
+ </div>
231
+ </div>
232
+
233
+ <div class="mt-4 flex justify-end">
234
+ <button id="save-project-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
235
+ <i class="fas fa-save mr-2"></i> Save Project
236
+ </button>
237
+ </div>
238
+ </div>
239
+ </main>
240
+
241
+ <footer class="bg-gray-900 text-gray-400 py-6">
242
+ <div class="container mx-auto px-4 text-center">
243
+ <p>© 2023 LyricWave - Text to Music Maker. All rights reserved.</p>
244
+ <div class="flex justify-center space-x-4 mt-2">
245
+ <a href="#" class="hover:text-white transition"><i class="fab fa-twitter"></i></a>
246
+ <a href="#" class="hover:text-white transition"><i class="fab fa-instagram"></i></a>
247
+ <a href="#" class="hover:text-white transition"><i class="fab fa-facebook"></i></a>
248
+ <a href="#" class="hover:text-white transition"><i class="fab fa-youtube"></i></a>
249
+ </div>
250
+ </div>
251
+ </footer>
252
+
253
+ <script>
254
+ document.addEventListener('DOMContentLoaded', function() {
255
+ // UI Elements
256
+ const generateBtn = document.getElementById('generate-btn');
257
+ const clearBtn = document.getElementById('clear-btn');
258
+ const playBtn = document.getElementById('play-btn');
259
+ const pauseBtn = document.getElementById('pause-btn');
260
+ const stopBtn = document.getElementById('stop-btn');
261
+ const downloadBtn = document.getElementById('download-btn');
262
+ const tempoSlider = document.getElementById('tempo-slider');
263
+ const tempoValue = document.getElementById('tempo-value');
264
+ const songDisplay = document.getElementById('song-display');
265
+ const lyricsDisplay = document.getElementById('lyrics-display');
266
+ const displayTitle = document.getElementById('display-title');
267
+ const displaySettings = document.getElementById('display-settings');
268
+
269
+ // Audio Context (simulated)
270
+ let audioContext;
271
+ let isPlaying = false;
272
+ let currentLine = 0;
273
+ let lyricInterval;
274
+
275
+ // Update tempo display
276
+ tempoSlider.addEventListener('input', function() {
277
+ tempoValue.textContent = `${this.value} BPM`;
278
+ });
279
+
280
+ // Genre buttons
281
+ const genreButtons = document.querySelectorAll('.genre-btn');
282
+ let selectedGenre = 'pop';
283
+
284
+ genreButtons.forEach(button => {
285
+ button.addEventListener('click', function() {
286
+ genreButtons.forEach(btn => btn.classList.remove('bg-purple-600', 'bg-blue-600', 'bg-green-600', 'bg-red-600', 'bg-yellow-600', 'bg-pink-600'));
287
+
288
+ selectedGenre = this.dataset.genre;
289
+ const colorMap = {
290
+ 'pop': 'bg-purple-600',
291
+ 'rock': 'bg-blue-600',
292
+ 'hiphop': 'bg-green-600',
293
+ 'electronic': 'bg-red-600',
294
+ 'jazz': 'bg-yellow-600',
295
+ 'r&b': 'bg-pink-600'
296
+ };
297
+
298
+ this.classList.add(colorMap[selectedGenre]);
299
+ });
300
+ });
301
+
302
+ // Mood buttons
303
+ const moodButtons = document.querySelectorAll('.mood-btn');
304
+ let selectedMood = 'happy';
305
+
306
+ moodButtons.forEach(button => {
307
+ button.addEventListener('click', function() {
308
+ moodButtons.forEach(btn => btn.classList.remove('bg-blue-400', 'bg-indigo-400', 'bg-green-400', 'bg-red-400', 'bg-yellow-400', 'bg-purple-400'));
309
+
310
+ selectedMood = this.dataset.mood;
311
+ const colorMap = {
312
+ 'happy': 'bg-blue-400',
313
+ 'sad': 'bg-indigo-400',
314
+ 'energetic': 'bg-green-400',
315
+ 'romantic': 'bg-red-400',
316
+ 'chill': 'bg-yellow-400',
317
+ 'mysterious': 'bg-purple-400'
318
+ };
319
+
320
+ this.classList.add(colorMap[selectedMood]);
321
+ });
322
+ });
323
+
324
+ // Instrument buttons
325
+ const instrumentButtons = document.querySelectorAll('.instrument-btn');
326
+ let selectedInstruments = [];
327
+
328
+ instrumentButtons.forEach(button => {
329
+ button.addEventListener('click', function() {
330
+ const instrument = this.dataset.instrument;
331
+
332
+ if (selectedInstruments.includes(instrument)) {
333
+ selectedInstruments = selectedInstruments.filter(i => i !== instrument);
334
+ this.classList.remove('bg-gray-600');
335
+ } else {
336
+ selectedInstruments.push(instrument);
337
+ this.classList.add('bg-gray-600');
338
+ }
339
+ });
340
+ });
341
+
342
+ // Generate music
343
+ generateBtn.addEventListener('click', function() {
344
+ const title = document.getElementById('song-title').value || 'Untitled Song';
345
+ const artist = document.getElementById('song-artist').value || 'Unknown Artist';
346
+ const lyrics = document.getElementById('song-lyrics').value;
347
+
348
+ if (!lyrics.trim()) {
349
+ alert('Please enter some lyrics first!');
350
+ return;
351
+ }
352
+
353
+ // Display the song
354
+ displayTitle.textContent = `${title} - ${artist}`;
355
+ displaySettings.textContent = `Genre: ${selectedGenre.charAt(0).toUpperCase() + selectedGenre.slice(1)} • Tempo: ${tempoSlider.value} BPM • Mood: ${selectedMood.charAt(0).toUpperCase() + selectedMood.slice(1)}`;
356
+
357
+ // Format lyrics for display
358
+ const lyricLines = lyrics.split('\n');
359
+ lyricsDisplay.innerHTML = '';
360
+
361
+ lyricLines.forEach((line, index) => {
362
+ if (line.trim() === '') {
363
+ lyricsDisplay.innerHTML += '<div class="h-6"></div>'; // Empty line
364
+ } else {
365
+ const lineDiv = document.createElement('div');
366
+ lineDiv.className = 'lyric-line transition';
367
+ lineDiv.textContent = line;
368
+ lineDiv.dataset.index = index;
369
+ lyricsDisplay.appendChild(lineDiv);
370
+ }
371
+ });
372
+
373
+ songDisplay.classList.remove('hidden');
374
+
375
+ // Simulate music generation
376
+ simulateMusicGeneration();
377
+ });
378
+
379
+ // Clear everything
380
+ clearBtn.addEventListener('click', function() {
381
+ document.getElementById('song-title').value = '';
382
+ document.getElementById('song-artist').value = '';
383
+ document.getElementById('song-lyrics').value = '';
384
+ songDisplay.classList.add('hidden');
385
+ stopMusic();
386
+
387
+ // Reset selections
388
+ genreButtons.forEach(btn => btn.classList.remove('bg-purple-600', 'bg-blue-600', 'bg-green-600', 'bg-red-600', 'bg-yellow-600', 'bg-pink-600'));
389
+ moodButtons.forEach(btn => btn.classList.remove('bg-blue-400', 'bg-indigo-400', 'bg-green-400', 'bg-red-400', 'bg-yellow-400', 'bg-purple-400'));
390
+ instrumentButtons.forEach(btn => btn.classList.remove('bg-gray-600'));
391
+
392
+ selectedGenre = 'pop';
393
+ selectedMood = 'happy';
394
+ selectedInstruments = [];
395
+ tempoSlider.value = 120;
396
+ tempoValue.textContent = '120 BPM';
397
+ });
398
+
399
+ // Play music
400
+ playBtn.addEventListener('click', function() {
401
+ if (!songDisplay.classList.contains('hidden')) {
402
+ playMusic();
403
+ }
404
+ });
405
+
406
+ // Pause music
407
+ pauseBtn.addEventListener('click', function() {
408
+ pauseMusic();
409
+ });
410
+
411
+ // Stop music
412
+ stopBtn.addEventListener('click', function() {
413
+ stopMusic();
414
+ });
415
+
416
+ // Download music
417
+ downloadBtn.addEventListener('click', function() {
418
+ if (!songDisplay.classList.contains('hidden')) {
419
+ alert('Your song is being prepared for download. This is a demo - in a real app, the generated audio file would download.');
420
+ } else {
421
+ alert('Please generate a song first!');
422
+ }
423
+ });
424
+
425
+ // Save project
426
+ document.getElementById('save-project-btn').addEventListener('click', function() {
427
+ alert('Project saved! This is a demo - in a real app, your song settings would be saved to your account.');
428
+ });
429
+
430
+ // Simulate music generation
431
+ function simulateMusicGeneration() {
432
+ // In a real app, this would use the Web Audio API to generate music
433
+ console.log(`Generating ${selectedGenre} music at ${tempoSlider.value} BPM with ${selectedMood} mood using ${selectedInstruments.join(', ')} instruments`);
434
+ }
435
+
436
+ // Simulate playing music
437
+ function playMusic() {
438
+ if (isPlaying) return;
439
+
440
+ isPlaying = true;
441
+ const lyricLines = document.querySelectorAll('.lyric-line');
442
+ if (lyricLines.length === 0) return;
443
+
444
+ currentLine = 0;
445
+ highlightCurrentLine();
446
+
447
+ // Calculate delay based on tempo (simplified)
448
+ const delay = 60000 / tempoSlider.value * 2; // 2 beats per line
449
+
450
+ lyricInterval = setInterval(() => {
451
+ currentLine = (currentLine + 1) % lyricLines.length;
452
+ highlightCurrentLine();
453
+ }, delay);
454
+ }
455
+
456
+ function pauseMusic() {
457
+ isPlaying = false;
458
+ clearInterval(lyricInterval);
459
+
460
+ // Remove all active classes
461
+ document.querySelectorAll('.lyric-line').forEach(line => {
462
+ line.classList.remove('active');
463
+ });
464
+ }
465
+
466
+ function stopMusic() {
467
+ pauseMusic();
468
+ currentLine = 0;
469
+ }
470
+
471
+ function highlightCurrentLine() {
472
+ const lyricLines = document.querySelectorAll('.lyric-line');
473
+
474
+ // Remove active class from all lines
475
+ lyricLines.forEach(line => {
476
+ line.classList.remove('active');
477
+ });
478
+
479
+ // Add active class to current line
480
+ if (lyricLines[currentLine]) {
481
+ lyricLines[currentLine].classList.add('active');
482
+
483
+ // Scroll to the line if it's not visible
484
+ lyricLines[currentLine].scrollIntoView({
485
+ behavior: 'smooth',
486
+ block: 'center'
487
+ });
488
+ }
489
+ }
490
+ });
491
+ </script>
492
+ <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=batnyan/musicsong" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
493
+ </html>