diff --git a/bgm/nastelbom-happy-birthday-471481.mp3 b/bgm/nastelbom-happy-birthday-471481.mp3 new file mode 100644 index 0000000..d9040c2 Binary files /dev/null and b/bgm/nastelbom-happy-birthday-471481.mp3 differ diff --git a/index.html b/index.html index e46dcc1..55d24e8 100644 --- a/index.html +++ b/index.html @@ -832,6 +832,8 @@ 확대된 갤러리 이미지 + + @@ -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 }); }