Updated multiple things on wedding-page

layouts/partials/audio.html

@@ -2,7 +2,7 @@
 .music-fab {
   position: fixed;
   bottom: 20px;
-  left: 20px;   /* 👈 change here */
+  left: 20px;
   z-index: 9999;
 }
 
@@ -24,19 +24,28 @@
 </style>
 
 <div class="music-fab">
-  <button id="music-btn" class="fab-button">▶️</button>
+  <button id="music-btn" class="fab-button">⏸️</button>
 </div>
 
-<audio id="bg-music" loop>
+<audio id="bg-music" autoplay loop>
   <source src="/audio/canon-in-d.mp3" type="audio/mpeg">
 </audio>
+
 <script>
 const btn = document.getElementById("music-btn");
 const audio = document.getElementById("bg-music");
 
-audio.volume = 0.2;
+audio.volume = 0.3;
 
-let isPlaying = false;
+// Initial state: assume autoplay started
+let isPlaying = true;
+btn.textContent = "⏸️"; // pause icon
+
+// Handle autoplay blocked by some browsers
+audio.play().catch(() => {
+  isPlaying = false;
+  btn.textContent = "▶️"; // play icon
+});
 
 btn.addEventListener("click", async () => {
   if (!isPlaying) {
@@ -50,7 +59,7 @@ btn.addEventListener("click", async () => {
   } else {
     audio.pause();
     isPlaying = false;
-    btn.textContent = "▶️";
+    btn.textContent = "▶️"; // play icon
   }
 });
 </script>