뮤직 플레이어 2

- 음악 플레이어 (깔끔한 디자인)

PC 최적화라 모바일에선 나오지 않습니다!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div id="music-widget-root" class="fixed-music-widget">
    <div id="widget-container" class="widget-container">
        
        <button class="toggle-minimize" onclick="toggleMinimize()" title="접기/펴기">
            <i id="min-icon" class="fa-solid fa-minus"></i>
        </button>

        <div class="image-rotation-wrapper" onclick="togglePlaylist()">
            <div id="image-main" class="rotated-image-area">
                <img src="https://i.postimg.cc/0N1L1YWy/images.jpg" alt="Fixed Cover">
            </div>
        </div>

        <div class="track-meta">
            <div id="meta-name">Nothing Now</div>
            <div id="meta-user">Select a song</div>
        </div>

        <div class="player-bottom">
            <div class="nav-btns">
                <button onclick="playPrev()"><i class="fa-solid fa-backward-step"></i></button>
                <button onclick="handleToggle()" id="main-play-btn" class="mini-play"><i class="fa-solid fa-play"></i></button>
                <button onclick="playNext()"><i class="fa-solid fa-forward-step"></i></button>
            </div>

            <div class="control-row-final">
                <i class="fa-solid fa-volume-off v-icon"></i>
                <div class="vol-line">
                    <input type="range" id="vol-range" min="0" max="1" step="0.01" value="0.2" oninput="changeVol()">
                </div>
                <i class="fa-solid fa-volume-high v-icon"></i>
                <button onclick="handleLoop()" id="loop-btn-final" title="반복 재생">
                    <i class="fa-solid fa-arrows-rotate"></i>
                </button>
            </div>
        </div>

        <div id="list-panel" class="list-panel-style">
            <div class="list-header" onclick="togglePlaylist()">Playlist <i class="fa-solid fa-chevron-down"></i></div>
            <ul id="list-render-target"></ul>
        </div>
    </div>
</div>

<style>
    .fixed-music-widget { position: fixed; top: 20px; left: 20px; z-index: 10000; font-family: 'Pretendard', sans-serif; }
    @media screen and (max-width: 768px) { .fixed-music-widget { display: none !important; } }
    .toggle-minimize { position: absolute; top: 12px; right: 15px; width: 20px; height: 20px; background: none; color: #ccc; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10001; font-size: 0.8rem; transition: color 0.2s; }
    .toggle-minimize:hover { color: #222; }
    .widget-container { width: 210px; height: 260px; background: #ffffff; border-radius: 26px; padding: 18px 15px 15px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .fixed-music-widget.minimized .widget-container { height: 45px; padding-bottom: 0; }
    .fixed-music-widget.minimized .image-rotation-wrapper, .fixed-music-widget.minimized .track-meta, .fixed-music-widget.minimized .player-bottom { display: none; }
    .image-rotation-wrapper { width: 110px; height: 110px; flex-shrink: 0; cursor: pointer; position: relative; margin-top: 5px; }
    .rotated-image-area { width: 100%; height: 100%; border-radius: 50% !important; overflow: hidden; border: 2px solid #f0f0f0; box-shadow: 0 8px 20px rgba(0,0,0,0.15); animation: rotate-img 15s linear infinite; animation-play-state: paused; }
    .rotated-image-area img { width: 100%; height: 100%; object-fit: cover !important; }
    @keyframes rotate-img { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .track-meta { text-align: center; width: 100%; margin: 8px 0 5px; }
    #meta-name { font-size: 0.85rem; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #meta-user { font-size: 0.7rem; color: #bbb; margin-top: 2px; }
    .player-bottom { width: 100%; }
    .nav-btns { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
    .nav-btns button { background: none; border: none; font-size: 1.05rem; cursor: pointer; color: #444; padding: 0;}
    .mini-play { width: 38px; height: 38px; border-radius: 50% !important; background: #222 !important; color: #fff !important; font-size: 0.85rem !important; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
    .control-row-final { display: flex; align-items: center; gap: 8px; background: #f7f7f7; padding: 6px 10px; border-radius: 20px; }
    .v-icon { font-size: 0.75rem; color: #bbb; }
    .vol-line { flex: 1; display: flex; align-items: center; }
    #vol-range { -webkit-appearance: none; width: 100%; height: 3px; background: #ddd; border-radius: 2px; outline: none; cursor: pointer; }
    #vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: #333; border-radius: 50%; cursor: pointer; }
    #loop-btn-final { background: none; border: none; cursor: pointer; font-size: 0.8rem; color: #999; padding: 0; margin-left: 2px; display: flex; align-items: center; transition: 0.2s; }
    #loop-btn-final.active { color: #000; font-weight: 900; }
    .list-panel-style { position: absolute; bottom: -100%; left: 0; width: 100%; height: 85%; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-top: 1px solid #eee; z-index: 10; border-top-left-radius: 24px; border-top-right-radius: 24px; }
    .list-panel-style.open { bottom: 0; }
    .list-header { padding: 12px; font-weight: bold; font-size: 0.8rem; text-align: center; border-bottom: 1px solid #f0f0f0; cursor: pointer; color: #222; }
    #list-render-target { list-style: none; padding: 0; margin: 0; max-height: 170px; overflow-y: auto; text-align: left;}
    #list-render-target li { padding: 11px 18px; font-size: 0.75rem; border-bottom: 1px solid #f9f9f9; cursor: pointer; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>

<script>
    const songs = [
        // ✅ jsDelivr 형식: https://cdn.jsdelivr.net/gh/유저명/저장소명@main/파일명.mp3
        { title: "キューティーハニー", artist: "倖田來未", url: "https://cdn.jsdelivr.net/gh/khsunn50-droid/user2bi@main/%E3%82%AD%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%BC%E3%83%8F%E3%83%8B%E3%83%BC%204.mp3" }
    ];

    let current = 0;
    let isLooping = false;

    // ✅ 수정 1: new Audio() 괄호 비움
    const player = new Audio();
    player.volume = 0.2;

    // ✅ 수정 2: toggleMinimize 아이콘 교체 버그 수정
    function toggleMinimize() {
        const root = document.getElementById('music-widget-root');
        const icon = document.getElementById('min-icon');
        root.classList.toggle('minimized');
        if (root.classList.contains('minimized')) {
            icon.classList.remove('fa-minus');
            icon.classList.add('fa-plus');
        } else {
            icon.classList.remove('fa-plus');
            icon.classList.add('fa-minus');
        }
    }

    function saveState() {
        localStorage.setItem('tistory_music_final_state', JSON.stringify({
            index: current, time: player.currentTime, paused: player.paused, volume: player.volume, loop: isLooping
        }));
    }

    function loadState() {
        const saved = localStorage.getItem('tistory_music_final_state');
        if (saved) {
            const state = JSON.parse(saved);
            current = state.index;
            isLooping = state.loop;
            player.volume = state.volume !== undefined ? state.volume : 0.2;
            document.getElementById('vol-range').value = player.volume;
            if (isLooping) document.getElementById('loop-btn-final').classList.add('active');
            player.loop = isLooping;
            loadTrack(current);
            player.currentTime = state.time || 0;
            if (!state.paused) {
                player.play().then(() => updateUI(true)).catch(() => updateUI(false));
            }
        } else {
            document.getElementById('meta-name').innerText = "Nothing Now";
            document.getElementById('meta-user').innerText = "Select a song";
            document.getElementById('vol-range').value = 0.2;
            if (songs.length > 0) player.src = songs[0].url;
            renderList();
        }
    }

    function loadTrack(idx) {
        if (!songs[idx]) return;
        player.src = songs[idx].url;
        document.getElementById('meta-name').innerText = songs[idx].title;
        document.getElementById('meta-user').innerText = songs[idx].artist;
        renderList();
    }

    // ✅ 수정 3: updateUI - 이미지 회전을 style 대신 class로 제어해서 더 안정적으로
    function updateUI(isPlaying) {
        const img = document.getElementById('image-main');
        const btn = document.getElementById('main-play-btn');
        if (isPlaying) {
            btn.innerHTML = '<i class="fa-solid fa-pause"></i>';
            img.style.animationPlayState = "running";
        } else {
            btn.innerHTML = '<i class="fa-solid fa-play"></i>';
            img.style.animationPlayState = "paused";
        }
    }

    function handleToggle() {
        if (player.paused) {
            if (document.getElementById('meta-name').innerText === "Nothing Now") {
                loadTrack(current);
            }
            player.play().then(() => updateUI(true)).catch(() => updateUI(false));
        } else {
            player.pause();
            updateUI(false);
        }
        saveState();
    }

    function playPrev() { current = (current - 1 + songs.length) % songs.length; syncPlayer(); }
    function playNext() { current = (current + 1) % songs.length; syncPlayer(); }

    function syncPlayer() {
        loadTrack(current);
        player.play().then(() => updateUI(true)).catch(() => updateUI(false));
        saveState();
    }

    function changeVol() { player.volume = document.getElementById('vol-range').value; saveState(); }

    function handleLoop() {
        isLooping = !isLooping;
        player.loop = isLooping;
        document.getElementById('loop-btn-final').classList.toggle('active');
        saveState();
    }

    function togglePlaylist() { document.getElementById('list-panel').classList.toggle('open'); }

    function renderList() {
        const box = document.getElementById('list-render-target');
        box.innerHTML = "";
        songs.forEach((s, i) => {
            const li = document.createElement('li');
            li.innerText = s.title;
            li.style.color = (i === current && document.getElementById('meta-name').innerText !== "Nothing Now") ? "#000" : "#666";
            li.style.fontWeight = (i === current && document.getElementById('meta-name').innerText !== "Nothing Now") ? "700" : "400";
            li.onclick = (e) => { e.stopPropagation(); current = i; syncPlayer(); togglePlaylist(); };
            box.appendChild(li);
        });
    }

    player.onended = () => { if (!isLooping) playNext(); };
    player.ontimeupdate = saveState;
    window.addEventListener('load', loadState);
</script>

 

코드는 </body> 바로 위에 넣으시면 됩니다!!

 

- 음악 플레이어 (윈도우 창 디자인)

PC 최적화라 모바일에선 나오지 않습니다!
+ 드래그 기능 ( x는 작동하지 않음 )

 

 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div id="music-draggable-win" class="win-popup-music">
    <div id="music-header" class="win-header-music">
        <span class="win-title-music">Music_Player.exe</span>
        <div class="win-buttons-music">
            <span class="win-btn-music" onclick="toggleMusicFold()">_</span>
            <span class="win-btn-music win-btn-deco">×</span>
        </div>
    </div>

    <div id="music-body-content" class="win-body-music">
        <div class="win-img-box-music" onclick="togglePlaylist()">
            <div class="disc-wrapper">
                <img id="music-disc-img" src="https://i.postimg.cc/G2kfMW3m/e268dbe585e662e072cc592c71da11fe.png" alt="Album Art">
            </div>
        </div>

        <div class="win-text-music">
            <h3 id="meta-name">Loading...</h3>
            <p id="meta-user">Artist Info</p>
        </div>

        <div class="win-controls-music">
            <div class="btn-group-music">
                <button class="win-push-btn-music" onclick="playPrev()"><i class="fa-solid fa-backward"></i></button>
                <button id="main-play-btn" class="win-push-btn-music play-main" onclick="handleToggle()"><i class="fa-solid fa-play"></i></button>
                <button class="win-push-btn-music" onclick="playNext()"><i class="fa-solid fa-forward"></i></button>
            </div>

            <div class="win-vol-box-music">
                <button id="loop-btn-final" class="win-push-btn-music loop-btn" onclick="handleLoop()" title="반복 재생">
                    <i class="fa-solid fa-repeat"></i>
                </button>
                <span style="font-size:9px; font-weight:bold; margin-left:2px; color:#333;">VOL</span>
                <div class="vol-track-bg">
                    <input type="range" id="vol-range" min="0" max="1" step="0.01" value="0.4" oninput="changeVol()">
                </div>
            </div>
        </div>

        <div id="list-panel" class="win-list-container-music">
            <div class="list-title-music" onclick="togglePlaylist()">-- PLAYLIST --</div>
            <ul id="list-render-target"></ul>
        </div>
    </div>
</div>

<style>
    .win-popup-music {
        position: fixed; top: 20px; right: 20px; width: 220px; z-index: 10001;
        background: #c0c0c0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff;
        box-shadow: 4px 4px 10px rgba(0,0,0,0.3); font-family: 'Tahoma', sans-serif; padding: 2px;
    }
    .win-header-music {
        background: linear-gradient(90deg, #000080, #1084d0); padding: 4px 8px;
        display: flex; justify-content: space-between; align-items: center; cursor: move;
    }
    .win-title-music { color: white; font-size: 11px; font-weight: bold; pointer-events: none; }
    .win-btn-music {
        width: 18px; height: 16px; background: #c0c0c0; border: 1px solid;
        border-color: #ffffff #808080 #808080 #ffffff; font-size: 12px;
        text-align: center; line-height: 12px; cursor: pointer; margin-left: 2px; color: #000;
    }
    .win-btn-deco { cursor: default; }
    .win-body-music { padding: 12px; border: 1px inset #ffffff; margin-top: 2px; background: #c0c0c0; position: relative; overflow: hidden; }
    .folded-music { display: none !important; }
    .win-img-box-music { cursor: pointer; margin-bottom: 10px; }
    .disc-wrapper { 
        width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; 
        border: 2px inset #808080; overflow: hidden;
        animation: rotate-disc 15s linear infinite; animation-play-state: paused;
    }
    .disc-wrapper img { width: 100%; height: 100%; object-fit: cover; }
    @keyframes rotate-disc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .win-text-music { text-align: center; margin-bottom: 10px; }
    .win-text-music h3 { font-size: 13px; margin: 0; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .win-text-music p { font-size: 11px; margin: 3px 0 0; color: #444; }
    .win-controls-music { display: flex; flex-direction: column; gap: 8px; }
    .btn-group-music { display: flex; justify-content: center; gap: 4px; }
    .win-push-btn-music {
        background: #c0c0c0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff;
        cursor: pointer; padding: 3px 6px; font-size: 10px; display: flex; align-items: center; justify-content: center;
    }
    .win-push-btn-music:active { border-color: #808080 #ffffff #ffffff #808080; }
    .play-main { width: 35px; }
    .win-vol-box-music { 
        display: flex; align-items: center; gap: 5px; background: #b0b0b0; 
        padding: 4px 6px; border: 1px inset #ffffff; 
    }
    .vol-track-bg {
        flex: 1; height: 14px; background: #ffffff;
        border: 1px inset #808080; display: flex; align-items: center; padding: 0 3px;
    }
    #vol-range { 
        width: 100%; height: 4px; cursor: pointer; accent-color: #000080; 
        -webkit-appearance: none; background: transparent;
    }
    #vol-range::-webkit-slider-thumb { -webkit-appearance: none; height: 10px; width: 6px; background: #c0c0c0; border: 1px solid #000; cursor: pointer; }
    .loop-btn.active { background: #e0e0e0; border-color: #808080 #ffffff #ffffff #808080; color: #000080; }
    .win-list-container-music {
        position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%;
        background: #c0c0c0; border-top: 2px solid #808080; transition: bottom 0.3s; z-index: 10;
        display: flex; flex-direction: column;
    }
    .win-list-container-music.open { bottom: 0; }
    .list-title-music { background: #808080; color: #fff; font-size: 10px; padding: 4px; text-align: center; cursor: pointer; }
    #list-render-target { list-style: none; padding: 0; margin: 5px; overflow-y: auto; flex: 1; background: #fff; border: 1px inset #808080; }
    #list-render-target li { padding: 5px 8px; font-size: 11px; border-bottom: 1px dotted #ccc; cursor: pointer; color: #333; }
    #list-render-target li:hover { background: #000080; color: #fff; }
    @media (max-width: 768px) { .win-popup-music { display: none !important; } }
</style>

<script>
    // 뮤직 플레이어용 설정 (노래 추가됨)
    const musicSongs = [
        { title: "キューティーハニー", artist: "倖田來未", url: "https://github.com/khsunn50-droid/user2bi/raw/refs/heads/main/%E3%82%AD%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%BC%E3%83%8F%E3%83%8B%E3%83%BC%204.mp3" }
    ];

    let musicCurrent = 0;
    let musicIsLooping = false;
    const musicPlayer = new Audio();
    musicPlayer.volume = 0.4;

    const musicWin = document.getElementById("music-draggable-win");
    const musicHeader = document.getElementById("music-header");
    let musicIsDragging = false;
    let musicOffset = { x: 0, y: 0 };

    // 드래그 로직
    musicHeader.addEventListener("mousedown", (e) => {
        musicIsDragging = true;
        musicOffset.x = e.clientX - musicWin.offsetLeft;
        musicOffset.y = e.clientY - musicWin.offsetTop;
    });
    document.addEventListener("mousemove", (e) => {
        if (!musicIsDragging) return;
        musicWin.style.left = (e.clientX - musicOffset.x) + "px";
        musicWin.style.top = (e.clientY - musicOffset.y) + "px";
    });
    document.addEventListener("mouseup", () => { musicIsDragging = false; });

    // 기본 기능 함수들
    function toggleMusicFold() { document.getElementById("music-body-content").classList.toggle("folded-music"); }
    function togglePlaylist() { document.getElementById('list-panel').classList.toggle('open'); }

    function loadMusicTrack(idx) {
        if (!musicSongs[idx]) return;
        musicPlayer.src = musicSongs[idx].url;
        document.getElementById('meta-name').innerText = musicSongs[idx].title;
        document.getElementById('meta-user').innerText = musicSongs[idx].artist;
        renderMusicList();
    }

    function updateMusicUI(isPlaying) {
        const disc = document.querySelector('.disc-wrapper');
        const btn = document.getElementById('main-play-btn');
        if (isPlaying) {
            btn.innerHTML = '<i class="fa-solid fa-pause"></i>';
            disc.style.animationPlayState = "running";
        } else {
            btn.innerHTML = '<i class="fa-solid fa-play"></i>';
            disc.style.animationPlayState = "paused";
        }
    }

    function handleToggle() {
        if (musicPlayer.paused) { musicPlayer.play(); updateMusicUI(true); } 
        else { musicPlayer.pause(); updateMusicUI(false); }
        saveMusicState();
    }

    function playPrev() { musicCurrent = (musicCurrent - 1 + musicSongs.length) % musicSongs.length; syncMusicPlayer(); }
    function playNext() { musicCurrent = (musicCurrent + 1) % musicSongs.length; syncMusicPlayer(); }
    function syncMusicPlayer() { loadMusicTrack(musicCurrent); musicPlayer.play(); updateMusicUI(true); saveMusicState(); }
    function changeVol() { musicPlayer.volume = document.getElementById('vol-range').value; saveMusicState(); }
    function handleLoop() {
        musicIsLooping = !musicIsLooping; musicPlayer.loop = musicIsLooping;
        document.getElementById('loop-btn-final').classList.toggle('active');
        saveMusicState();
    }

    function renderMusicList() {
        const box = document.getElementById('list-render-target');
        box.innerHTML = "";
        musicSongs.forEach((s, i) => {
            const li = document.createElement('li');
            li.innerText = s.title;
            if(i === musicCurrent) { li.style.background = "#000080"; li.style.color = "#fff"; }
            li.onclick = (e) => { e.stopPropagation(); musicCurrent = i; syncMusicPlayer(); togglePlaylist(); };
            box.appendChild(li);
        });
    }

    // 🔥 실시간 상태 저장 (페이지 이동 대응)
    musicPlayer.ontimeupdate = () => { saveMusicState(); };

    function saveMusicState() {
        localStorage.setItem('win95_music_state_v2', JSON.stringify({
            index: musicCurrent,
            time: musicPlayer.currentTime,
            paused: musicPlayer.paused,
            volume: musicPlayer.volume,
            loop: musicIsLooping
        }));
    }

    // 🔥 로드 시 이어듣기 실행
    window.addEventListener('load', () => {
        const saved = localStorage.getItem('win95_music_state_v2');
        if (saved) {
            const state = JSON.parse(saved);
            musicCurrent = state.index;
            musicIsLooping = state.loop;
            musicPlayer.volume = state.volume !== undefined ? state.volume : 0.4;
            document.getElementById('vol-range').value = musicPlayer.volume;
            
            if (musicIsLooping) document.getElementById('loop-btn-final').classList.add('active');
            musicPlayer.loop = musicIsLooping;

            loadMusicTrack(musicCurrent);
            
            // 저장된 시간 지점으로 이동
            if (state.time) musicPlayer.currentTime = state.time;

            // 이전 상태가 재생 중이었다면 자동 재생 시도
            if (!state.paused) {
                musicPlayer.play().then(() => updateMusicUI(true)).catch(() => updateMusicUI(false));
            }
        } else {
            loadMusicTrack(musicCurrent);
        }
    });

    musicPlayer.onended = () => { if(!musicIsLooping) playNext(); };
</script>

 

- 커스텀 설명문

1. 음악 추가하기

기존 마지막 코드 끝에 쉼표(,)를 찍어 연결 고리를 만들고, 그 뒤에 새 코드를 붙여넣으세요.

 

*예시

const musicSongs = [
    { title: "노래1", artist: "가수1", url: "링크1" }, // ← 원래 없었다면 쉼표를 찍어주세요
    { title: "노래2", artist: "가수2", url: "링크2" }  // ← 새로 추가한 코드 (쉼표 X)
];

 

2. 음악 제거하기

지우고 싶은 { ... } 덩어리를 통째로 삭제하세요.
지우고 난 뒤, 남아있는 마지막 코드 뒤에 쉼표(,)가 붙어있다면 그것도 같이 지워줘야 합니다.

*음악은 깃허브에 업로드해서 음악 주소를 복사, 붙여넣기 했습니다!*
(youtube 링크는 되는지 안 되는지 모릅니다... 되도록이면 깃허브에 업로드해서 쓰는 걸 추천드립니다!)

3. 깃허브에 음악 업로드 방법

- 깃허브 검색 > 회원가입 > 깃허브 홈에서 new 클릭 

Repository name (저장소 이름)
Description (설명)

맨 아래 초록 버튼 클릭

다시 홈으로 가서 왼쪽에 생성된 저장소 클릭

 uploading an existing file 클릭 후 mp3 파일 업로드 > 맨 아래 초록 버튼 클릭

Raw 버튼 오른쪽 클릭 후 링크 주소 복사
위 코드 url : " " 안에 링크 붙여넣기 후,

 

https://github.com/유저명/저장소명/raw/main/파일명.mp3

위의 주소를 아래처럼 변경하시면 끝!

https://cdn.jsdelivr.net/gh/유저명/저장소명@main/파일명.mp3

 

(이렇게 하는 이유는 보안 정책 때문에 음악 재생이 막힐 수 있어서)

1. 이미지 변경

<img id="music-disc-img" src="https://i.postimg.cc/0N1L1YWy/images.jpg" alt="Album Art">

 

위의 코드에서 src="https://~~.png 또는 jpg" << 빨간색 부분에 있는 이미지 링크를 변경해주면 됩니다.

 

 

깔끔한 디자인에서는 여기서 변경해주시면 됩니다!

<img src="https://i.postimg.cc/0N1L1YWy/images.jpg" alt="Fixed Cover">

 

 

무료 이미지 호스팅 사이트

 

- 기본 볼륨 변경

<input type="range" id="vol-range" min="0" max="1" step="0.01" value="0.1" oninput="changeVol()">

1. 슬라이더 위치 변경

코드 중간쯤에 있는 input 태그의 value 값을 수정합니다.

const musicPlayer = new Audio();
musicPlayer.volume = 0.1; // 이 숫자를 위와 동일하게 변경

2. 실제 오디오 값

<script> 시작 부분 근처에 있는 설정값을 수정합니다. (깔끔한 디자인은 "const player")

// 저장된 값이 없을 때 사용할 기본값입니다.
musicPlayer.volume = state.volume !== undefined ? state.volume : 0.1; 
// 마지막의 0.1을 원하는 숫자로 변경

3. 새로고침 시 데이터 복구 로직 (이어듣기 방지)

코드 맨 아래쪽 window.addEventListener('load', ...) 부분에 있는 기본값을 수정합니다.

(깔끔한 디자인은 player.volume)

 

 

숫자는 0.0(무음)부터 1.0(최대 음량) 사이로 입력하시면 되며, 예를 들어 20%로 하고 싶다면 0.2를 넣으시면 됩니다.

 

세 군데 중 한 곳이라도 숫자가 다르면, 새로고침했을 때 갑자기 소리가 커지거나 슬라이더 바 위치가 어색해질 수 있으니 꼭 세 곳 모두 바꿔주세요.

 
 
 
편하게 사용해주세요!
 
만약 오류가 있다면 댓글로 문의 부탁드립니다. 감사합니다~