끊기지 않는 유튜브 bgm 재생 코드

유튜브 오디오를 페이지가 이동해도 끊기지 않고 재생될 수 있도록 했다

마땅한 디자인이 생각나지 않아 on/off 기능은 지원하지 않고 있지만... 

어떻게 완성해야할지 고민이다

ㅇㅅㅇ...

그리고 한 번 이걸 적용하면 티스토리 내에 임의 데이터가 너무 많이 쌓여서

업데이트 전에 초기화를 한 번 시켜야 할 것 같다... 

<div id="youtubePlayer"></div>

<script>
    // YouTube IFrame API 로드
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 전역 변수
    var player;
    var saveInterval;

    // YouTube IFrame Player API 초기화
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('youtubePlayer', {
            height: '0', // 숨김 처리
            width: '0', // 숨김 처리
            videoId: 'h3b81wivFSg', // 유튜브 영상 ID
            playerVars: {
                autoplay: 1,
                loop: 1,
                playlist: 'h3b81wivFSg',
            },
            events: {
                onReady: onPlayerReady,
            },
        });
    }

    // 플레이어가 준비되었을 때 실행
    function onPlayerReady(event) {
        // 이전 재생 시간 가져오기
        const savedTime = parseFloat(localStorage.getItem('bgmTime')) || 0;
        player.seekTo(savedTime, true); // 저장된 시간으로 이동
        player.playVideo(); // 자동 재생 시작

        // 주기적으로 현재 재생 시간 저장 (0.1초 간격)
        saveInterval = setInterval(() => {
            const currentTime = player.getCurrentTime();
            if (!isNaN(currentTime)) {
                localStorage.setItem('bgmTime', currentTime.toFixed(1)); // 0.1초 단위 저장
            }
        }, 50); // 0.05초 간격
    }

    // 페이지 떠날 때 재생 시간 즉시 저장
    window.addEventListener('beforeunload', () => {
        clearInterval(saveInterval); // 주기적 저장 중단
        if (player) {
            const currentTime = player.getCurrentTime();
            if (!isNaN(currentTime)) {
                localStorage.setItem('bgmTime', currentTime.toFixed(1)); // 즉시 저장
            }
        }
    });
</script>