diff options
Diffstat (limited to 'layouts/recordings/recordings-plain.html')
| -rw-r--r-- | layouts/recordings/recordings-plain.html | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/layouts/recordings/recordings-plain.html b/layouts/recordings/recordings-plain.html index 9fb5f09..4f8bec3 100644 --- a/layouts/recordings/recordings-plain.html +++ b/layouts/recordings/recordings-plain.html @@ -105,6 +105,15 @@ <div id="meta" class="meta"></div> </div> + {{/* 섹션 레벨 배경음악 (recordings/ 루트에 오디오 파일이 있는 경우) */}} + {{ $secAudio := .Resources.Match "*.{mp3,m4a,ogg,wav,opus,OPUS,OGG,WAV,MP3,M4A}" }} + {{ with (index $secAudio 0) }} + <audio id="bgm" src="{{ .RelPermalink }}" preload="auto" loop style="display:none"></audio> + <div style="position:fixed;right:16px;bottom:16px;z-index:10"> + <button id="bgm-toggle" class="badge" style="opacity:.8;cursor:pointer;border:none;background:#666;color:white">BGM ▷</button> + </div> + {{ end }} + <ul id="list"> <!-- 페이지 폴더명 -> 페이지 객체 매핑 제거 (노트는 아래에서 일괄 정렬 출력) --> <!-- 1) 섹션 폴더 바로 아래 mp4/mov (섹션 리소스) --> @@ -251,6 +260,29 @@ } }); + // BGM 토글 버튼 및 자동재생 시도 + const bgm = document.getElementById('bgm'); + const toggle = document.getElementById('bgm-toggle'); + if (bgm && toggle) { + const tryPlay = () => bgm.play().then(() => { toggle.textContent = 'BGM ❚❚'; }).catch(() => {}); + // 자동재생 시도 + tryPlay(); + // 첫 사용자 클릭 시 재생 시도 + const onFirst = () => { tryPlay(); document.removeEventListener('click', onFirst); }; + document.addEventListener('click', onFirst, { once: true }); + + toggle.addEventListener('click', (e) => { + e.preventDefault(); + if (bgm.paused) { + tryPlay(); + } else { + bgm.pause(); + bgm.currentTime = 0; + toggle.textContent = 'BGM ▷'; + } + }); + } + const list = document.getElementById("list"); const wrap = document.getElementById("player"); const video = document.getElementById("video"); |