⚠️꼭 백업하고 진행하세요⚠️

js/bgm.js

1. 최상단에 모바일 접속 확인을 위한 변수 추가

const isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

2. 모바일에서 안내창을 띄우지 않게 하고, 자동재생을 막고, 브금창을 닫힌 상태로 만듦 + 브금창을 열어야 브금 재생되게 하기

총 4개의 함수를 수정해야 함

- onPlayerReady

- showBGMNotice

- setupUserInteractionListeners

- togglePlayer

function onPlayerReady(event) {
    전략...

    // 볼륨 슬라이더 동기화
    const volumeSlider = document.getElementById('volume-slider');
    if (volumeSlider) {
        volumeSlider.value = currentVolume;
    }

    // 모바일일 경우 minimized 클래스 추가
    const bgmPlayer = document.getElementById('bgm-player');
    
    if (isMobile()) {
        // 모바일이면 초기 상태를 minimized로 설정
        isMinimized = true;
        if (bgmPlayer) {
            bgmPlayer.classList.add('minimized');
            bgmPlayer.classList.add('show'); // 위치는 잡아야 하므로 show는 추가
        }
    } else {
        // PC일 때 기존 로직
        setTimeout(() => {
            if (bgmPlayer) {
                bgmPlayer.classList.add('show');
            }
        }, 500);
        
        setupUserInteractionListeners();
        showBGMNotice();
    }

    updateTrackInfo();
    updateControls();
    loadPlaylist();

    updateShuffleUI();
    updateRepeatUI();
    updateVolumeIcon();
}

// 안내창 표시 함수 수정
function showBGMNotice() {
    if (isMobile()) return; // 모바일에서는 안내창을 아예 띄우지 않음
    if (document.getElementById('bgm-notice')) return;
    ...생략}

// 전역 클릭 감지 함수 수정
function setupUserInteractionListeners() {
    if (isMobile()) return; // 모바일에서는 화면 터치만으로 재생되는 것을 차단

    const events = ['click', 'touchstart', 'keydown', 'scroll', 'mousemove'];
    ...생략}

function togglePlayer() {
    전략...
    } else {
        playerElement.classList.remove('minimized');
        
        // 모바일에서 접힌 플레이어를 '클릭해서 열었을 때' 재생 시작
        if (isMobile() && !userInteracted) {
            userInteracted = true;
            if (readyToPlay && player && playerReady) {
                startBGM();
            }
        }
    }
}