Spaces:

batnyan
/

music-maker

Running

App Files Files Community

batnyan commited on Apr 10, 2025

Commit

f0eb147

verified ·

1 Parent(s): 670de15

Add 1 files

Browse files

Files changed (1) hide show

index.html +393 -81

index.html CHANGED Viewed

@@ -3,15 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MelodyAI - AI Music Generator</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         body {
             font-family: 'Poppins', sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
             min-height: 100vh;
             color: #fff;
         }
@@ -98,6 +99,40 @@
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
     </style>
 </head>
 <body class="min-h-screen flex flex-col">
@@ -111,27 +146,27 @@
                     <div></div>
                     <div></div>
                 </div>
-                <h1 class="text-2xl font-bold gradient-text">Melody<span class="text-white">AI</span></h1>
             </div>
             <nav>
                 <ul class="flex space-x-6">
                     <li><a href="#" class="hover:text-blue-400 transition">Home</a></li>
-                    <li><a href="#" class="hover:text-blue-400 transition">Features</a></li>
-                    <li><a href="#" class="hover:text-blue-400 transition">About</a></li>
                 </ul>
             </nav>
         </div>
     </header>
     <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div class="max-w-4xl mx-auto">
             <div class="text-center mb-12">
-                <h2 class="text-4xl font-bold mb-4">Create Your <span class="gradient-text">AI-Generated</span> Masterpiece</h2>
-                <p class="text-gray-400 max-w-2xl mx-auto">Generate complete songs with lyrics, melody, and vocals in any style you desire. Powered by advanced AI technology.</p>
             </div>
-            <div class="bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800 mb-8">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
                         <h3 class="text-xl font-semibold mb-4">Song Parameters</h3>
@@ -184,7 +219,7 @@
                     </div>
                     <div>
-                        <h3 class="text-xl font-semibold mb-4">Vocal Options</h3>
                         <div class="space-y-4">
                             <div>
@@ -228,7 +263,18 @@
                                 </select>
                             </div>
-                            <div class="pt-4">
                                 <button id="generate-btn" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
                                     <i class="fas fa-magic mr-2"></i> Generate Full Song
                                 </button>
@@ -249,28 +295,63 @@
                     </div>
                 </div>
                 <h3 class="text-xl font-semibold mb-2">Composing your masterpiece...</h3>
-                <p class="text-gray-400">Our AI is working hard to create your perfect song. This may take a few moments.</p>
                 <div class="w-full bg-gray-800 rounded-full h-2.5 mt-6 max-w-md mx-auto">
                     <div id="progress-bar" class="bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
                 </div>
             </div>
             <div id="result-container" class="hidden bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800 fade-in">
                 <div class="flex justify-between items-center mb-6">
                     <h3 class="text-2xl font-bold">Your AI-Generated Song</h3>
                     <div class="flex space-x-3">
-                        <button id="download-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
                             <i class="fas fa-download mr-2"></i> Download
                         </button>
-                        <button id="regenerate-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
                             <i class="fas fa-redo mr-2"></i> Regenerate
                         </button>
                     </div>
                 </div>
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                     <div class="lg:col-span-2">
-                        <div class="bg-gray-800 rounded-lg p-4 mb-6">
                             <div class="flex items-center justify-between mb-4">
                                 <div>
                                     <h4 class="font-semibold text-lg" id="song-title">Summer Breeze</h4>
@@ -287,12 +368,16 @@
                             </div>
                             <div class="relative">
-                                <div id="waveform" class="h-20 bg-gray-700 rounded"></div>
                                 <div class="flex justify-between text-xs text-gray-400 mt-1">
                                     <span id="current-time">0:00</span>
                                     <span id="total-time">3:45</span>
                                 </div>
                             </div>
                         </div>
                         <div class="bg-gray-800 rounded-lg p-6">
@@ -304,9 +389,9 @@
                     </div>
                     <div>
-                        <div class="bg-gray-800 rounded-lg p-6">
                             <h4 class="font-semibold text-lg mb-4">Song Details</h4>
-                            <div class="space-y-3">
                                 <div>
                                     <p class="text-sm text-gray-400">Genre</p>
                                     <p id="detail-genre" class="font-medium">Pop</p>
@@ -327,11 +412,53 @@
                                     <p class="text-sm text-gray-400">Tempo</p>
                                     <p id="detail-tempo" class="font-medium">120 BPM</p>
                                 </div>
                             </div>
                             <div class="mt-6 pt-6 border-t border-gray-700">
                                 <h4 class="font-semibold text-lg mb-4">AI Insights</h4>
-                                <p class="text-gray-300 text-sm">This song was generated based on your preferences. The AI analyzed popular song structures in the selected genre and created original lyrics matching your theme.</p>
                             </div>
                         </div>
                     </div>
@@ -342,7 +469,7 @@
     <footer class="py-6 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
         <div class="container mx-auto text-center text-gray-400">
-            <p>© 2023 MelodyAI. All AI-generated songs are original compositions.</p>
             <div class="flex justify-center space-x-6 mt-4">
                 <a href="#" class="hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a>
                 <a href="#" class="hover:text-blue-400 transition"><i class="fab fa-instagram"></i></a>
@@ -354,6 +481,7 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const generateBtn = document.getElementById('generate-btn');
             const loadingSection = document.getElementById('loading');
             const resultContainer = document.getElementById('result-container');
@@ -362,57 +490,81 @@
             const regenerateBtn = document.getElementById('regenerate-btn');
             const downloadBtn = document.getElementById('download-btn');
             const progressBar = document.getElementById('progress-bar');
             // Sample lyrics data
             const sampleLyrics = {
                 pop: [
-                    {time: "0:15", text: "[Verse 1]"},
-                    {time: "0:15", text: "Summer breeze and golden rays"},
-                    {time: "0:20", text: "Dancing through the endless days"},
-                    {time: "0:25", text: "Your smile lights up my world so bright"},
-                    {time: "0:30", text: "Like the stars that fill the night"},
-                    {time: "0:40", text: ""},
-                    {time: "0:45", text: "[Pre-Chorus]"},
-                    {time: "0:45", text: "Whisper softly in my ear"},
-                    {time: "0:50", text: "Tell me that you'll always be here"},
-                    {time: "0:55", text: "Through the highs and through the lows"},
-                    {time: "1:00", text: "Our love just grows and grows"},
-                    {time: "1:10", text: ""},
-                    {time: "1:15", text: "[Chorus]"},
-                    {time: "1:15", text: "You're the rhythm to my melody"},
-                    {time: "1:20", text: "The perfect harmony"},
-                    {time: "1:25", text: "Together we can make it through"},
-                    {time: "1:30", text: "Every storm that comes our way"},
-                    {time: "1:35", text: "You're my sunshine, night and day"},
-                    {time: "1:45", text: ""},
-                    {time: "1:50", text: "[Verse 2]"},
-                    {time: "1:50", text: "City lights and neon dreams"},
-                    {time: "1:55", text: "Nothing's ever what it seems"},
-                    {time: "2:00", text: "But when I'm lost you bring me home"},
-                    {time: "2:05", text: "Never have to be alone"},
-                    {time: "2:15", text: ""},
-                    {time: "2:20", text: "[Pre-Chorus]"},
-                    {time: "2:20", text: "Whisper softly in my ear"},
-                    {time: "2:25", text: "Tell me that you'll always be here"},
-                    {time: "2:30", text: "Through the highs and through the lows"},
-                    {time: "2:35", text: "Our love just grows and grows"},
-                    {time: "2:45", text: ""},
-                    {time: "2:50", text: "[Chorus]"},
-                    {time: "2:50", text: "You're the rhythm to my melody"},
-                    {time: "2:55", text: "The perfect harmony"},
-                    {time: "3:00", text: "Together we can make it through"},
-                    {time: "3:05", text: "Every storm that comes our way"},
-                    {time: "3:10", text: "You're my sunshine, night and day"},
-                    {time: "3:20", text: ""},
-                    {time: "3:25", text: "[Bridge]"},
-                    {time: "3:25", text: "Oh-oh-oh, oh-oh-oh"},
-                    {time: "3:30", text: "Never let this feeling go"},
-                    {time: "3:35", text: "Oh-oh-oh, oh-oh-oh"},
-                    {time: "3:40", text: "This love is all I know"},
-                    {time: "3:45", text: ""},
-                    {time: "3:50", text: "[Outro]"},
-                    {time: "3:50", text: "Summer breeze and golden rays"},
-                    {time: "3:55", text: "Dancing through the endless days..."}
                 ],
                 rock: [
                     // Sample rock lyrics would go here
@@ -422,6 +574,135 @@
                 ]
             };
             // Generate song function
             generateBtn.addEventListener('click', function() {
                 // Show loading section
@@ -437,26 +718,38 @@
                 const vocalGender = document.querySelector('input[name="vocal-gender"]:checked').value;
                 const vocalStyle = document.getElementById('vocal-style').value;
                 const language = document.getElementById('language').value;
-                // Simulate progress
                 let progress = 0;
                 const progressInterval = setInterval(() => {
-                    progress += Math.random() * 10;
                     if (progress > 100) progress = 100;
                     progressBar.style.width = `${progress}%`;
                     if (progress >= 100) {
                         clearInterval(progressInterval);
                         setTimeout(() => {
                             loadingSection.classList.add('hidden');
-                            showGeneratedSong(genre, mood, length, theme, vocalGender, vocalStyle, language);
                         }, 500);
                     }
                 }, 300);
             });
             // Show generated song
-            function showGeneratedSong(genre, mood, length, theme, vocalGender, vocalStyle, language) {
                 // Update song details
                 document.getElementById('song-title').textContent = generateTitle(theme);
                 document.getElementById('detail-genre').textContent = capitalizeFirstLetter(genre);
@@ -464,10 +757,17 @@
                 document.getElementById('detail-length').textContent = getSongLength(length);
                 document.getElementById('detail-key').textContent = getRandomKey();
                 document.getElementById('detail-tempo').textContent = getRandomTempo(genre);
                 // Display lyrics
                 const lyricsContainer = document.getElementById('lyrics');
                 lyricsContainer.innerHTML = '';
                 const lyrics = sampleLyrics[genre] || sampleLyrics.pop;
                 lyrics.forEach(line => {
@@ -477,9 +777,15 @@
                         p.className += ' font-semibold text-blue-400 mt-4';
                     }
                     p.textContent = line.text;
                     lyricsContainer.appendChild(p);
                 });
                 // Show result
                 resultContainer.classList.remove('hidden');
             }
@@ -530,26 +836,32 @@
             // Player controls
             playBtn.addEventListener('click', function() {
-                playBtn.classList.add('hidden');
-                pauseBtn.classList.remove('hidden');
-                // In a real app, this would play the audio
             });
             pauseBtn.addEventListener('click', function() {
-                pauseBtn.classList.add('hidden');
-                playBtn.classList.remove('hidden');
-                // In a real app, this would pause the audio
             });
             // Regenerate button
             regenerateBtn.addEventListener('click', function() {
                 resultContainer.classList.add('hidden');
-                generateBtn.click();
             });
             // Download button
             downloadBtn.addEventListener('click', function() {
-                alert("In a real application, this would download the song as an MP3 file.");
             });
             // Initialize form container reference

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HarmonyAI - Complete AI Music Generator</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/wavesurfer.js@7"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         body {
             font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
             min-height: 100vh;
             color: #fff;
         }
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        .highlight-lyric {
+            background: rgba(59, 130, 246, 0.2);
+            border-left: 3px solid #3b82f6;
+            padding-left: 8px;
+            transition: all 0.3s ease;
+        }
+        #waveform {
+            cursor: pointer;
+        }
+        .vocal-visualizer {
+            height: 100px;
+            background: #1e293b;
+            border-radius: 8px;
+            margin-top: 20px;
+            position: relative;
+            overflow: hidden;
+        }
+        .vocal-bar {
+            position: absolute;
+            bottom: 0;
+            width: 4px;
+            background: linear-gradient(to top, #3b82f6, #8b5cf6);
+            border-radius: 2px;
+            animation: vocalAnimation 0.5s alternate infinite;
+        }
+        @keyframes vocalAnimation {
+            from { height: 10%; }
+            to { height: 100%; }
+        }
     </style>
 </head>
 <body class="min-h-screen flex flex-col">
                     <div></div>
                     <div></div>
                 </div>
+                <h1 class="text-2xl font-bold gradient-text">Harmony<span class="text-white">AI</span></h1>
             </div>
             <nav>
                 <ul class="flex space-x-6">
                     <li><a href="#" class="hover:text-blue-400 transition">Home</a></li>
+                    <li><a href="#" class="hover:text-blue-400 transition">Examples</a></li>
+                    <li><a href="#" class="hover:text-blue-400 transition">Pricing</a></li>
                 </ul>
             </nav>
         </div>
     </header>
     <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="max-w-6xl mx-auto">
             <div class="text-center mb-12">
+                <h2 class="text-4xl font-bold mb-4">Create Complete <span class="gradient-text">AI-Generated</span> Songs</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Generate professional-quality music with lyrics, melody, and vocals in any style. Powered by cutting-edge AI technology.</p>
             </div>
+            <div id="form-container" class="bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800 mb-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                     <div>
                         <h3 class="text-xl font-semibold mb-4">Song Parameters</h3>
                     </div>
                     <div>
+                        <h3 class="text-xl font-semibold mb-4">Vocal & Instrumentation</h3>
                         <div class="space-y-4">
                             <div>
                                 </select>
                             </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-400 mb-1">Instrumentation</label>
+                                <select id="instrumentation" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                    <option value="full">Full Band</option>
+                                    <option value="acoustic">Acoustic</option>
+                                    <option value="electronic">Electronic</option>
+                                    <option value="orchestral">Orchestral</option>
+                                    <option value="minimal">Minimal</option>
+                                </select>
+                            </div>
+                            <div class="pt-2">
                                 <button id="generate-btn" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
                                     <i class="fas fa-magic mr-2"></i> Generate Full Song
                                 </button>
                     </div>
                 </div>
                 <h3 class="text-xl font-semibold mb-2">Composing your masterpiece...</h3>
+                <p class="text-gray-400">Our AI is analyzing your preferences and creating a unique song. This may take a few moments.</p>
                 <div class="w-full bg-gray-800 rounded-full h-2.5 mt-6 max-w-md mx-auto">
                     <div id="progress-bar" class="bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
                 </div>
+                <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
+                    <div class="bg-gray-800 p-4 rounded-lg">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-music text-white text-sm"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Generating</p>
+                                <p class="font-medium">Melody</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-800 p-4 rounded-lg opacity-50">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-align-left text-white text-sm"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Pending</p>
+                                <p class="font-medium">Lyrics</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-800 p-4 rounded-lg opacity-50">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-microphone text-white text-sm"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-400">Pending</p>
+                                <p class="font-medium">Vocals</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div id="result-container" class="hidden bg-gray-900 rounded-xl p-6 shadow-xl border border-gray-800 fade-in">
                 <div class="flex justify-between items-center mb-6">
                     <h3 class="text-2xl font-bold">Your AI-Generated Song</h3>
                     <div class="flex space-x-3">
+                        <button id="download-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center">
                             <i class="fas fa-download mr-2"></i> Download
                         </button>
+                        <button id="regenerate-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition flex items-center">
                             <i class="fas fa-redo mr-2"></i> Regenerate
                         </button>
                     </div>
                 </div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     <div class="lg:col-span-2">
+                        <div class="bg-gray-800 rounded-lg p-6 mb-6">
                             <div class="flex items-center justify-between mb-4">
                                 <div>
                                     <h4 class="font-semibold text-lg" id="song-title">Summer Breeze</h4>
                             </div>
                             <div class="relative">
+                                <div id="waveform" class="h-24 bg-gray-700 rounded"></div>
                                 <div class="flex justify-between text-xs text-gray-400 mt-1">
                                     <span id="current-time">0:00</span>
                                     <span id="total-time">3:45</span>
                                 </div>
                             </div>
+                            <div class="vocal-visualizer mt-6" id="vocal-visualizer">
+                                <!-- Vocal bars will be added dynamically -->
+                            </div>
                         </div>
                         <div class="bg-gray-800 rounded-lg p-6">
                     </div>
                     <div>
+                        <div class="bg-gray-800 rounded-lg p-6 sticky top-6">
                             <h4 class="font-semibold text-lg mb-4">Song Details</h4>
+                            <div class="space-y-4">
                                 <div>
                                     <p class="text-sm text-gray-400">Genre</p>
                                     <p id="detail-genre" class="font-medium">Pop</p>
                                     <p class="text-sm text-gray-400">Tempo</p>
                                     <p id="detail-tempo" class="font-medium">120 BPM</p>
                                 </div>
+                                <div>
+                                    <p class="text-sm text-gray-400">Vocal Style</p>
+                                    <p id="detail-vocal-style" class="font-medium">Smooth</p>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-400">Instrumentation</p>
+                                    <p id="detail-instrumentation" class="font-medium">Full Band</p>
+                                </div>
                             </div>
                             <div class="mt-6 pt-6 border-t border-gray-700">
                                 <h4 class="font-semibold text-lg mb-4">AI Insights</h4>
+                                <p class="text-gray-300 text-sm" id="ai-insights">This song combines elements of modern pop with a nostalgic summer vibe. The melody features a catchy hook and the lyrics tell a story of young love.</p>
+                            </div>
+                            <div class="mt-6 pt-6 border-t border-gray-700">
+                                <h4 class="font-semibold text-lg mb-4">Song Structure</h4>
+                                <div class="space-y-2">
+                                    <div class="flex justify-between">
+                                        <span class="text-sm">Intro</span>
+                                        <span class="text-sm text-gray-400">0:00 - 0:15</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-sm">Verse 1</span>
+                                        <span class="text-sm text-gray-400">0:15 - 0:45</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-sm">Chorus</span>
+                                        <span class="text-sm text-gray-400">0:45 - 1:15</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-sm">Verse 2</span>
+                                        <span class="text-sm text-gray-400">1:15 - 1:45</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-sm">Bridge</span>
+                                        <span class="text-sm text-gray-400">1:45 - 2:15</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-sm">Final Chorus</span>
+                                        <span class="text-sm text-gray-400">2:15 - 3:00</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-sm">Outro</span>
+                                        <span class="text-sm text-gray-400">3:00 - 3:45</span>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
     <footer class="py-6 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
         <div class="container mx-auto text-center text-gray-400">
+            <p>© 2023 HarmonyAI. All AI-generated songs are original compositions.</p>
             <div class="flex justify-center space-x-6 mt-4">
                 <a href="#" class="hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a>
                 <a href="#" class="hover:text-blue-400 transition"><i class="fab fa-instagram"></i></a>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
             const generateBtn = document.getElementById('generate-btn');
             const loadingSection = document.getElementById('loading');
             const resultContainer = document.getElementById('result-container');
             const regenerateBtn = document.getElementById('regenerate-btn');
             const downloadBtn = document.getElementById('download-btn');
             const progressBar = document.getElementById('progress-bar');
+            const vocalVisualizer = document.getElementById('vocal-visualizer');
+            // Initialize WaveSurfer
+            let wavesurfer;
+            let isPlaying = false;
+            let currentLyricIndex = 0;
+            let lyricElements = [];
+            // Sample audio data (in a real app, this would be generated or fetched)
+            const sampleAudioData = {
+                pop: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+                rock: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
+                hiphop: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
+                electronic: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3"
+            };
             // Sample lyrics data
             const sampleLyrics = {
                 pop: [
+                    {time: 0, text: "[Instrumental Intro]"},
+                    {time: 15, text: "[Verse 1]"},
+                    {time: 15, text: "Summer breeze and golden rays"},
+                    {time: 20, text: "Dancing through the endless days"},
+                    {time: 25, text: "Your smile lights up my world so bright"},
+                    {time: 30, text: "Like the stars that fill the night"},
+                    {time: 40, text: ""},
+                    {time: 45, text: "[Pre-Chorus]"},
+                    {time: 45, text: "Whisper softly in my ear"},
+                    {time: 50, text: "Tell me that you'll always be here"},
+                    {time: 55, text: "Through the highs and through the lows"},
+                    {time: 60, text: "Our love just grows and grows"},
+                    {time: 70, text: ""},
+                    {time: 75, text: "[Chorus]"},
+                    {time: 75, text: "You're the rhythm to my melody"},
+                    {time: 80, text: "The perfect harmony"},
+                    {time: 85, text: "Together we can make it through"},
+                    {time: 90, text: "Every storm that comes our way"},
+                    {time: 95, text: "You're my sunshine, night and day"},
+                    {time: 105, text: ""},
+                    {time: 110, text: "[Instrumental Break]"},
+                    {time: 125, text: "[Verse 2]"},
+                    {time: 125, text: "City lights and neon dreams"},
+                    {time: 130, text: "Nothing's ever what it seems"},
+                    {time: 135, text: "But when I'm lost you bring me home"},
+                    {time: 140, text: "Never have to be alone"},
+                    {time: 150, text: ""},
+                    {time: 155, text: "[Pre-Chorus]"},
+                    {time: 155, text: "Whisper softly in my ear"},
+                    {time: 160, text: "Tell me that you'll always be here"},
+                    {time: 165, text: "Through the highs and through the lows"},
+                    {time: 170, text: "Our love just grows and grows"},
+                    {time: 180, text: ""},
+                    {time: 185, text: "[Chorus]"},
+                    {time: 185, text: "You're the rhythm to my melody"},
+                    {time: 190, text: "The perfect harmony"},
+                    {time: 195, text: "Together we can make it through"},
+                    {time: 200, text: "Every storm that comes our way"},
+                    {time: 205, text: "You're my sunshine, night and day"},
+                    {time: 215, text: ""},
+                    {time: 220, text: "[Bridge]"},
+                    {time: 220, text: "Oh-oh-oh, oh-oh-oh"},
+                    {time: 225, text: "Never let this feeling go"},
+                    {time: 230, text: "Oh-oh-oh, oh-oh-oh"},
+                    {time: 235, text: "This love is all I know"},
+                    {time: 245, text: ""},
+                    {time: 250, text: "[Final Chorus]"},
+                    {time: 250, text: "You're the rhythm to my melody"},
+                    {time: 255, text: "The perfect harmony"},
+                    {time: 260, text: "Together we can make it through"},
+                    {time: 265, text: "Every storm that comes our way"},
+                    {time: 270, text: "You're my sunshine, night and day"},
+                    {time: 280, text: ""},
+                    {time: 285, text: "[Outro]"},
+                    {time: 285, text: "Summer breeze and golden rays"},
+                    {time: 290, text: "Dancing through the endless days..."}
                 ],
                 rock: [
                     // Sample rock lyrics would go here
                 ]
             };
+            // AI Insights based on genre and mood
+            const aiInsights = {
+                pop: {
+                    happy: "This song combines elements of modern pop with an uplifting summer vibe. The melody features a catchy hook and the lyrics tell a story of young love and carefree days.",
+                    sad: "A melancholic pop ballad with emotional vocals and introspective lyrics about heartbreak and lost love. The melody features a memorable piano line and builds to an emotional climax.",
+                    romantic: "A smooth pop love song with tender vocals and heartfelt lyrics. The arrangement features warm synths and a gentle rhythm that creates an intimate atmosphere."
+                },
+                rock: {
+                    happy: "An energetic rock anthem with driving guitars and powerful vocals. The lyrics celebrate freedom and living life to the fullest.",
+                    angry: "A hard-hitting rock track with distorted guitars and aggressive vocals. The lyrics express frustration and rebellion against the system."
+                },
+                hiphop: {
+                    happy: "An upbeat hip hop track with a bouncy beat and confident flow. The lyrics celebrate success and good times with friends.",
+                    chill: "A laid-back hip hop groove with smooth vocals and jazzy instrumentation. The lyrics reflect on life and personal growth."
+                }
+            };
+            // Initialize WaveSurfer
+            function initWaveSurfer(audioUrl) {
+                if (wavesurfer) {
+                    wavesurfer.destroy();
+                }
+                wavesurfer = WaveSurfer.create({
+                    container: '#waveform',
+                    waveColor: '#3b82f6',
+                    progressColor: '#8b5cf6',
+                    cursorColor: '#ffffff',
+                    cursorWidth: 1,
+                    barWidth: 2,
+                    barRadius: 2,
+                    barGap: 1,
+                    height: 80,
+                    responsive: true,
+                    normalize: true,
+                    partialRender: true
+                });
+                wavesurfer.load(audioUrl);
+                wavesurfer.on('ready', function() {
+                    // Update total time display
+                    const duration = wavesurfer.getDuration();
+                    document.getElementById('total-time').textContent = formatTime(duration);
+                    // Create vocal visualizer bars
+                    createVocalVisualizer();
+                });
+                wavesurfer.on('audioprocess', function() {
+                    updateCurrentTime();
+                    highlightCurrentLyric();
+                });
+                wavesurfer.on('seek', function() {
+                    updateCurrentTime();
+                    highlightCurrentLyric();
+                });
+                wavesurfer.on('finish', function() {
+                    playBtn.classList.remove('hidden');
+                    pauseBtn.classList.add('hidden');
+                    isPlaying = false;
+                });
+            }
+            // Create vocal visualizer effect
+            function createVocalVisualizer() {
+                vocalVisualizer.innerHTML = '';
+                const barCount = 50;
+                for (let i = 0; i < barCount; i++) {
+                    const bar = document.createElement('div');
+                    bar.className = 'vocal-bar';
+                    bar.style.left = `${(i / barCount) * 100}%`;
+                    bar.style.animationDelay = `${i * 0.05}s`;
+                    vocalVisualizer.appendChild(bar);
+                }
+            }
+            // Format time (seconds to MM:SS)
+            function formatTime(seconds) {
+                const minutes = Math.floor(seconds / 60);
+                const remainingSeconds = Math.floor(seconds % 60);
+                return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+            }
+            // Update current time display
+            function updateCurrentTime() {
+                if (wavesurfer) {
+                    const currentTime = wavesurfer.getCurrentTime();
+                    document.getElementById('current-time').textContent = formatTime(currentTime);
+                }
+            }
+            // Highlight current lyric
+            function highlightCurrentLyric() {
+                if (!wavesurfer || lyricElements.length === 0) return;
+                const currentTime = wavesurfer.getCurrentTime() * 1000; // convert to milliseconds
+                // Find the current lyric
+                let newIndex = 0;
+                for (let i = 0; i < lyricElements.length; i++) {
+                    const time = parseInt(lyricElements[i].dataset.time);
+                    if (time <= currentTime) {
+                        newIndex = i;
+                    } else {
+                        break;
+                    }
+                }
+                // Update highlight if changed
+                if (newIndex !== currentLyricIndex) {
+                    if (currentLyricIndex >= 0 && currentLyricIndex < lyricElements.length) {
+                        lyricElements[currentLyricIndex].classList.remove('highlight-lyric');
+                    }
+                    currentLyricIndex = newIndex;
+                    lyricElements[currentLyricIndex].classList.add('highlight-lyric');
+                    // Scroll to the lyric
+                    lyricElements[currentLyricIndex].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center'
+                    });
+                }
+            }
             // Generate song function
             generateBtn.addEventListener('click', function() {
                 // Show loading section
                 const vocalGender = document.querySelector('input[name="vocal-gender"]:checked').value;
                 const vocalStyle = document.getElementById('vocal-style').value;
                 const language = document.getElementById('language').value;
+                const instrumentation = document.getElementById('instrumentation').value;
+                // Simulate progress with different stages
                 let progress = 0;
                 const progressInterval = setInterval(() => {
+                    progress += Math.random() * 5;
                     if (progress > 100) progress = 100;
                     progressBar.style.width = `${progress}%`;
+                    // Update loading status
+                    if (progress >= 30 && progress < 70) {
+                        document.querySelectorAll('.bg-gray-800')[1].classList.remove('opacity-50');
+                        document.querySelectorAll('.bg-gray-800')[1].classList.add('bg-blue-500');
+                        document.querySelectorAll('.flex.items-center')[3].querySelector('i').className = 'fas fa-align-left text-white text-sm';
+                    } else if (progress >= 70) {
+                        document.querySelectorAll('.bg-gray-800')[2].classList.remove('opacity-50');
+                        document.querySelectorAll('.bg-gray-800')[2].classList.add('bg-blue-500');
+                        document.querySelectorAll('.flex.items-center')[5].querySelector('i').className = 'fas fa-microphone text-white text-sm';
+                    }
                     if (progress >= 100) {
                         clearInterval(progressInterval);
                         setTimeout(() => {
                             loadingSection.classList.add('hidden');
+                            showGeneratedSong(genre, mood, length, theme, vocalGender, vocalStyle, language, instrumentation);
                         }, 500);
                     }
                 }, 300);
             });
             // Show generated song
+            function showGeneratedSong(genre, mood, length, theme, vocalGender, vocalStyle, language, instrumentation) {
                 // Update song details
                 document.getElementById('song-title').textContent = generateTitle(theme);
                 document.getElementById('detail-genre').textContent = capitalizeFirstLetter(genre);
                 document.getElementById('detail-length').textContent = getSongLength(length);
                 document.getElementById('detail-key').textContent = getRandomKey();
                 document.getElementById('detail-tempo').textContent = getRandomTempo(genre);
+                document.getElementById('detail-vocal-style').textContent = capitalizeFirstLetter(vocalStyle);
+                document.getElementById('detail-instrumentation').textContent = capitalizeFirstLetter(instrumentation);
+                // Set AI insights
+                const insights = aiInsights[genre]?.[mood] || "This song combines elements of your selected genre with the mood you specified. The AI analyzed popular song structures to create this original composition.";
+                document.getElementById('ai-insights').textContent = insights;
                 // Display lyrics
                 const lyricsContainer = document.getElementById('lyrics');
                 lyricsContainer.innerHTML = '';
+                lyricElements = [];
                 const lyrics = sampleLyrics[genre] || sampleLyrics.pop;
                 lyrics.forEach(line => {
                         p.className += ' font-semibold text-blue-400 mt-4';
                     }
                     p.textContent = line.text;
+                    p.dataset.time = line.time * 1000; // convert to milliseconds
                     lyricsContainer.appendChild(p);
+                    lyricElements.push(p);
                 });
+                // Initialize WaveSurfer with sample audio
+                const audioUrl = sampleAudioData[genre] || sampleAudioData.pop;
+                initWaveSurfer(audioUrl);
                 // Show result
                 resultContainer.classList.remove('hidden');
             }
             // Player controls
             playBtn.addEventListener('click', function() {
+                if (wavesurfer) {
+                    wavesurfer.play();
+                    playBtn.classList.add('hidden');
+                    pauseBtn.classList.remove('hidden');
+                    isPlaying = true;
+                }
             });
             pauseBtn.addEventListener('click', function() {
+                if (wavesurfer) {
+                    wavesurfer.pause();
+                    pauseBtn.classList.add('hidden');
+                    playBtn.classList.remove('hidden');
+                    isPlaying = false;
+                }
             });
             // Regenerate button
             regenerateBtn.addEventListener('click', function() {
                 resultContainer.classList.add('hidden');
+                document.getElementById('form-container').classList.remove('hidden');
             });
             // Download button
             downloadBtn.addEventListener('click', function() {
+                alert("In a real application, this would download the song as an MP3 file with metadata.");
             });
             // Initialize form container reference