bgm 추가

index.html

@@ -832,6 +832,8 @@
     <img src="" alt="확대된 갤러리 이미지">
   </div>
 
+  <audio id="bgm" src="./bgm/nastelbom-happy-birthday-471481.mp3" preload="auto" loop></audio>
+
   <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/index.global.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
@@ -1334,15 +1336,50 @@
       }, { passive: true });
     };
 
+    const setupBgm = () => {
+      const bgm = document.querySelector("#bgm");
+
+      if (!bgm) {
+        return;
+      }
+
+      bgm.volume = .45;
+
+      const playBgm = () => {
+        const playPromise = bgm.play();
+
+        if (playPromise && typeof playPromise.catch === "function") {
+          playPromise.catch(() => {});
+        }
+      };
+
+      const playBgmOnce = () => {
+        playBgm();
+        window.removeEventListener("click", playBgmOnce);
+        window.removeEventListener("touchstart", playBgmOnce);
+        window.removeEventListener("wheel", playBgmOnce);
+        window.removeEventListener("keydown", playBgmOnce);
+      };
+
+      playBgm();
+
+      window.addEventListener("click", playBgmOnce, { once: true });
+      window.addEventListener("touchstart", playBgmOnce, { once: true });
+      window.addEventListener("wheel", playBgmOnce, { once: true });
+      window.addEventListener("keydown", playBgmOnce, { once: true });
+    };
+
     if (document.readyState === "complete") {
       setupHeroCover();
       setupLightbox();
       setupAosAnimations();
+      setupBgm();
     } else {
       window.addEventListener("load", () => {
         setupHeroCover();
         setupLightbox();
         setupAosAnimations();
+        setupBgm();
       }, { once: true });
     }
   </script>