Added music button

layouts/_default/wedding.html

@@ -78,6 +78,7 @@
 </style>
 
 <div class="wedding-container">
+{{ partial "audio.html" . }}
 
   <!-- Countdown Timer -->
   <div class="countdown">

layouts/partials/audio.html

@@ -0,0 +1,56 @@
+<style>
+.music-fab {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;   /* 👈 change here */
+  z-index: 9999;
+}
+
+.fab-button {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: none;
+  background: white;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
+  font-size: 20px;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.fab-button:active {
+  transform: scale(0.95);
+}
+</style>
+
+<div class="music-fab">
+  <button id="music-btn" class="fab-button">▶️</button>
+</div>
+
+<audio id="bg-music" 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;
+
+let isPlaying = false;
+
+btn.addEventListener("click", async () => {
+  if (!isPlaying) {
+    try {
+      await audio.play();
+      isPlaying = true;
+      btn.textContent = "⏸️"; // pause icon
+    } catch (e) {
+      console.log("Playback blocked:", e);
+    }
+  } else {
+    audio.pause();
+    isPlaying = false;
+    btn.textContent = "▶️";
+  }
+});
+</script>