Update templates/base.html

templates/base.html

@@ -21,12 +21,17 @@
         {% block content %}{% endblock %}
     </div>
     <!-- Background flute music -->
-    <audio id="flute-audio" src="/static/assets/flute.mp3" loop autoplay></audio>
+    <audio id="flute-audio" src="/static/assets/flute.mp3" loop></audio>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const audio = document.getElementById('flute-audio');
+            // Attempt to play audio, with a fallback for user interaction
             audio.play().catch(error => {
                 console.error('Error playing audio:', error);
+                // Add a click event to play audio on user interaction (due to browser restrictions)
+                document.body.addEventListener('click', () => {
+                    audio.play().catch(err => console.error('Error playing audio on click:', err));
+                }, { once: true });
             });
         });
     </script>