Update templates/index.html

templates/index.html

@@ -65,11 +65,11 @@
                         </div>
                     </div>
 
-                    <!-- Download Button -->
-                    <button onclick="downloadAudio()" 
+                    <!-- Play Audio Button -->
+                    <button onclick="playAudio()" 
                             class="w-full bg-green-500 hover:bg-green-600 active:bg-green-700 text-white py-4 px-6 rounded-xl transition-all duration-300 flex items-center justify-center space-x-2 font-medium focus:outline-none focus:ring-2 focus:ring-green-500/50 focus:ring-offset-2 dark:ring-offset-gray-800 mt-4">
-                        <i class="fas fa-download text-sm"></i>
-                        <span>Download MP3</span>
+                        <i class="fas fa-play text-sm"></i>
+                        <span>Start Listening</span>
                     </button>
                 </div>
             </div>
@@ -164,14 +164,14 @@
             });
         }
 
-        function downloadAudio() {
+        function playAudio() {
             const url = $('#youtubeUrl').val().trim();
             if (!url) {
                 showError('Please enter a YouTube URL');
                 return;
             }
 
-            showLoading('Preparing your download...');
+            showLoading('Preparing audio...');
 
             $.ajax({
                 url: '/download',
@@ -183,20 +183,23 @@
                 },
                 success: function(response) {
                     const blob = new Blob([response], { type: 'audio/mp3' });
-                    const downloadUrl = window.URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.style.display = 'none';
-                    a.href = downloadUrl;
-                    a.download = $('#videoTitle').text() + '.mp3';
-                    document.body.appendChild(a);
-                    a.click();
-                    window.URL.revokeObjectURL(downloadUrl);
+                    const audioUrl = URL.createObjectURL(blob);
+
+                    const audioPlayer = document.createElement('audio');
+                    audioPlayer.src = audioUrl;
+                    audioPlayer.controls = true;
+                    audioPlayer.style.width = '100%';
+                    audioPlayer.style.marginTop = '1rem';
+
+                    const videoInfoContainer = document.querySelector('#videoInfo .p-6');
+                    videoInfoContainer.appendChild(audioPlayer);
+
                     Swal.close();
-                    showSuccess('Download started');
+                    showSuccess('Audio is ready to play');
                 },
                 error: function(xhr) {
                     Swal.close();
-                    showError('Download failed');
+                    showError('Failed to prepare audio');
                 }
             });
         }
@@ -217,6 +220,5 @@
             document.documentElement.classList.add('dark');
         }
     </script>
-</head>
 </body>
 </html>