baue eine play funktion ein sodass man probe hören kann bevor man runterläd

index.html

@@ -123,7 +123,7 @@
                                 <p class="text-sm text-gray-900 truncate">Welcome to our platform...</p>
                             </div>
                             <div class="flex space-x-2">
-                                <button class="p-1 text-indigo-600 hover:text-indigo-800">
+                                <button class="p-1 text-indigo-600 hover:text-indigo-800 play-sample">
                                     <i data-feather="play" class="w-4 h-4"></i>
                                 </button>
                                 <button class="p-1 text-gray-600 hover:text-gray-800">
@@ -136,7 +136,7 @@
                                 <p class="text-sm text-gray-900 truncate">The quick brown fox jumps over...</p>
                             </div>
                             <div class="flex space-x-2">
-                                <button class="p-1 text-indigo-600 hover:text-indigo-800">
+                                <button class="p-1 text-indigo-600 hover:text-indigo-800 play-sample">
                                     <i data-feather="play" class="w-4 h-4"></i>
                                 </button>
                                 <button class="p-1 text-gray-600 hover:text-gray-800">
@@ -219,6 +219,24 @@
                 toast.remove();
             }, 3000);
         });
+
+        // Play sample functionality
+        document.querySelectorAll('.play-sample').forEach(button => {
+            button.addEventListener('click', function() {
+                const audio = new Audio('https://actions.google.com/sounds/v1/alarms/beep_short.ogg');
+                audio.play().catch(e => console.log('Audio playback failed:', e));
+                
+                // Show playing state
+                const icon = this.querySelector('i');
+                icon.setAttribute('data-feather', 'loader');
+                feather.replace();
+                
+                audio.onended = () => {
+                    icon.setAttribute('data-feather', 'play');
+                    feather.replace();
+                };
+            });
+        });
     </script>
 </body>
 </html>