음악 플레이어 3

- 음악 플레이어3

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

예시 / 프린님, 서님cm

<!-- Font Awesome 호출 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Coral+Pixels&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap" rel="stylesheet">
<div id="music-player-container">
    <div class="player-wrapper">
        
        <!-- 1. 플레이리스트 (왼쪽) -->
        <div id="playlist-window" class="playlist-window">
            <div class="pl-header">Playlist</div>
            <div class="pl-body-box">
                <ul id="playlist-ul">
                    <li>노래 제목 1 - 가수</li>
                    <li>노래 제목 2 - 가수</li>
                </ul>
            </div>
        </div>
        <!-- 2. 메인 플레이어 본체 (높이 조절됨) -->
        <div id="main-player-body" class="main-player">
            <!-- 접기 버튼 (ㅡ 모양) -->
            <div class="toggle-fold" onclick="toggleFold(event)">
                <i class="fa-solid fa-minus"></i>
            </div>
            <!-- 기본 캐릭터 (배율 유지, 위치 재조정) -->
            <div id="char-wrap" class="char-wrap" onclick="togglePlaylist()">
                <div id="song-bubble" class="song-bubble"></div>
                <img src="" id="main-char" class="character-img" alt="char">
            </div>
            
            <!-- 재생 바 -->
            <div class="progress-container" id="p-container">
                <div class="progress-base">
                    <div class="progress-fill" id="p-bar">
                        <div class="progress-thumb"></div>
                    </div>
                </div>
            </div>
            <!-- 컨트롤 버튼 -->
            <div class="control-btns">
                <div class="btn-circle" onclick="prevTrack()"><i class="fa-solid fa-backward-step"></i></div>
                <div class="btn-circle main-play" onclick="togglePlay()">
                    <i class="fa-solid fa-play" id="play-pause-icon"></i>
                </div>
                <div class="btn-circle" onclick="nextTrack()"><i class="fa-solid fa-forward-step"></i></div>
            </div>
            <!-- 볼륨 활성화 버튼 -->
            <i class="fa-solid fa-volume-high vol-toggle-btn" onclick="toggleVolume()"></i>
        </div>
        <!-- 3. 볼륨 바 (오른쪽 옆) -->
        <div id="vol-panel" class="vol-side-panel">
            <div class="vol-base">
                <input type="range" min="0" max="100" value="50" class="vol-range" id="vol-slider">
            </div>
        </div>
        <!-- 4. 접혔을 때 전용 캐릭터 -->
        <div id="folded-mode-area" style="display: none;" onclick="toggleFold(event)">
            <div id="folded-bubble" class="song-bubble"></div>
            <img src="캐릭터 이미지 주소" id="folded-char" class="character-img" alt="folded-char">
        </div>
    </div>
</div>
<style>
    :root {
        --bg-main: #E4E4E4;
        --btn-bg: #B9B9B9;
        --icon-main: #7B7B7B;
        --bar-base: #CECECE;
        --bar-fill: #7B7B7B;
        --bar-thumb: #5C5C5C;
        --sub-icon: #ABABAB;
        --pl-box: #B9B9B9;
        --pl-text: #7F7F7F;
    }
    #music-player-container { position: fixed; bottom: 30px; left: 30px; z-index: 10000; font-family: 'Coral Pixels', 'New Tegomin', sans-serif; }
    .player-wrapper { display: flex; align-items: flex-end; gap: 12px; position: relative; }
    /* 메인 플레이어 - 반투명 처리 */
    .main-player { width: 340px; height: 90px; background: rgba(228, 228, 228, 0.75); backdrop-filter: blur(8px); border-radius: 20px; 
                   padding: 10px 15px; box-sizing: border-box; display: flex; flex-direction: column; 
                   justify-content: flex-end; align-items: center; position: relative; }
    .char-wrap { 
        width: 80px; 
        position: absolute; 
        bottom: 64px;
        transform: translateX(-50%); 
        cursor: pointer; 
        transition: left 0.1s linear; 
        z-index: 10; 
    }
    /* src가 비어있으면 숨겨서 깜빡임 방지 */
    .character-img { width: 100%; height: auto; display: block; pointer-events: none; }
    .character-img[src=""] { visibility: hidden; }
    /* 말풍선 스타일 */
    .song-bubble {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        color: #555;
        font-size: 9px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        margin-bottom: 6px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    /* 말풍선 꼬리 (삼각형) */
    .song-bubble::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #fff;
    }
    .song-bubble.show { opacity: 1; }
    .char-wrap.jumping { animation: jumpAnimWrap 1.0s infinite ease-in-out; }
    @keyframes jumpAnimWrap { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-18px); } }
    .jumping { animation: jumpAnim 1.0s infinite ease-in-out; }
    @keyframes jumpAnim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
    .progress-container { width: 92%; margin-bottom: 12px; cursor: pointer; }
    .progress-base { width: 100%; height: 5px; background: var(--bar-base); border-radius: 10px; position: relative; }
    .progress-fill { width: 0%; height: 100%; background: var(--bar-fill); border-radius: 10px; position: relative; }
    .progress-thumb { width: 10px; height: 10px; background: var(--bar-thumb); border-radius: 50%; 
                      position: absolute; right: -5px; top: 50%; transform: translateY(-50%); }
    .control-btns { display: flex; gap: 20px; align-items: center; justify-content: center; }
    .btn-circle { width: 30px; height: 30px; background: var(--btn-bg); border-radius: 50%; 
                  display: flex; justify-content: center; align-items: center; color: var(--icon-main); cursor: pointer; font-size: 12px; }
    .btn-circle.main-play { width: 36px; height: 36px; font-size: 16px; }
    .toggle-fold { position: absolute; left: 18px; bottom: 8px; cursor: pointer; color: var(--sub-icon); font-size: 12px; }
    .vol-toggle-btn { position: absolute; right: 18px; bottom: 12px; cursor: pointer; color: var(--sub-icon); font-size: 12px; line-height: 12px; }
    /* 볼륨 패널 - 반투명 처리 */
    .vol-side-panel { 
        width: 0; opacity: 0; height: 90px; background: rgba(228, 228, 228, 0.75); backdrop-filter: blur(8px); border-radius: 15px; 
        display: flex; justify-content: center; align-items: center; overflow: hidden; 
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .vol-side-panel.active { width: 38px; opacity: 1; }
    .vol-base { width: 5px; height: 75%; background: var(--bar-base); border-radius: 10px; display: flex; justify-content: center; }
    .vol-range { appearance: slider-vertical; width: 4px; height: 100%; cursor: pointer; background: transparent; accent-color: var(--bar-fill); }
    .vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: var(--bar-thumb); border-radius: 50%; cursor: pointer; }
    /* 플레이리스트 - 반투명 처리 */
    .playlist-window { width: 0; opacity: 0; height: 90px; background: rgba(228, 228, 228, 0.75); backdrop-filter: blur(8px); border-radius: 15px; 
                       overflow: hidden; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; }
    .playlist-window.active { width: 180px; opacity: 1; padding: 10px; margin-right: 8px; }
    .pl-header { font-weight: bold; color: var(--pl-text); font-style: italic; font-size: 13px; margin-bottom: 5px; }
    .pl-body-box { background: var(--pl-box); border-radius: 10px; flex-grow: 1; padding: 6px; color: var(--pl-text); font-size: 10px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .pl-body-box::-webkit-scrollbar { display: none; }
    .pl-body-box ul { list-style: none; padding: 0; margin: 0; }
    .pl-body-box ul li { padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
    .pl-body-box ul li:hover { background: rgba(255,255,255,0.3); }
    .pl-body-box ul li.active-track { background: rgba(255,255,255,0.45); font-weight: bold; }
    .folded-mode .main-player, .folded-mode .playlist-window, .folded-mode .vol-side-panel { display: none !important; }
    .folded-mode #folded-mode-area { display: block !important; width: 75px; cursor: pointer; position: relative; }
    /* 모바일에서 플레이어 숨김 */
    @media screen and (max-width: 768px) {
        #music-player-container { display: none !important; }
    }
    /* 페이지 로드 시 깜빡임 방지 */
    #music-player-container { opacity: 0; transition: opacity 0.3s ease; }
    #music-player-container.ready { opacity: 1; }
</style>
<script>
    let isPlaying = false;
    let isFolded = false;
    let progress = 0;
    let ticker;
    let currentTrackIndex = 0;
    const mainChar = document.getElementById('main-char');
    const fChar = document.getElementById('folded-char');
    const pIcon = document.getElementById('play-pause-icon');
    const pBar = document.getElementById('p-bar');
    const charWrap = document.getElementById('char-wrap');
    const pContainer = document.getElementById('p-container');
    /* 캐릭터 이미지 주소 설정 */
    const charPlayImg = "재생 중 캐릭터 이미지";
    const charPauseImg = "정지 캐릭터 이미지";
    /* 이미지 미리 로드 — 재생/정지 전환 시 깜빡임 완전 방지 */
    const preloadPlay = new Image();
    preloadPlay.src = charPlayImg;
    const preloadPause = new Image();
    preloadPause.src = charPauseImg;
    const tracks = [
        {
            title: "노래 제목",
            artist: "가수 이름",
            src: "깃허브 링크"
        }
    ];
    const audio = new Audio();
    audio.volume = 0.5;
    function renderPlaylist() {
        const ul = document.getElementById('playlist-ul');
        ul.innerHTML = '';
        tracks.forEach((track, i) => {
            const li = document.createElement('li');
            li.textContent = track.title + ' - ' + track.artist;
            if (i === currentTrackIndex) li.classList.add('active-track');
            li.addEventListener('click', () => {
                currentTrackIndex = i;
                loadAndPlay();
            });
            ul.appendChild(li);
        });
    }
    function loadAndPlay() {
        if (tracks.length === 0) return;
        audio.src = tracks[currentTrackIndex].src;
        audio.load();
        progress = 0;
        drawUI();
        renderPlaylist();
        if (!isPlaying) togglePlay();
        else { audio.play(); updateBubble(); }
    }
    audio.addEventListener('ended', () => {
        nextTrack();
    });
    const songBubble = document.getElementById('song-bubble');
    /* 말풍선에 현재 곡 제목 표시/숨김 (펼침 + 접힘 둘 다) */
    function updateBubble() {
        if (isPlaying && tracks.length > 0) {
            songBubble.textContent = tracks[currentTrackIndex].title;
            songBubble.classList.add('show');
            foldedBubble.textContent = tracks[currentTrackIndex].title;
            foldedBubble.classList.add('show');
        } else {
            songBubble.classList.remove('show');
            foldedBubble.classList.remove('show');
        }
    }
    const foldedArea = document.getElementById('folded-mode-area');
    const foldedBubble = document.getElementById('folded-bubble');
    function togglePlay() {
        isPlaying = !isPlaying;
        if (isPlaying) {
            pIcon.classList.replace('fa-play', 'fa-pause');
            charWrap.classList.add('jumping');
            mainChar.src = charPlayImg;
            foldedArea.classList.add('jumping');
            if (tracks.length > 0) {
                if (!audio.src || audio.src === location.href) {
                    audio.src = tracks[currentTrackIndex].src;
                    audio.load();
                }
                audio.play();
            }
        } else {
            pIcon.classList.replace('fa-pause', 'fa-play');
            charWrap.classList.remove('jumping');
            mainChar.src = charPauseImg;
            foldedArea.classList.remove('jumping');
            audio.pause();
        }
        updateBubble();
    }
    function drawUI() {
        pBar.style.width = progress + '%';
        const containerRect = pContainer.getBoundingClientRect();
        const barFillWidth = (progress / 100) * containerRect.width;
        charWrap.style.left = (pContainer.offsetLeft + barFillWidth) + 'px';
    }
    function prevTrack() {
        if (tracks.length === 0) return;
        if (audio.currentTime > 3) {
            audio.currentTime = 0;
            progress = 0;
            drawUI();
        } else {
            currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
            loadAndPlay();
        }
    }
    function nextTrack() {
        if (tracks.length === 0) return;
        currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
        loadAndPlay();
    }
    function togglePlaylist() {
        if(!isFolded) {
            document.getElementById('vol-panel').classList.remove('active');
            document.getElementById('playlist-window').classList.toggle('active');
        }
    }
    function toggleVolume() {
        if(!isFolded) {
            document.getElementById('playlist-window').classList.remove('active');
            document.getElementById('vol-panel').classList.toggle('active');
        }
    }
    function toggleFold(event) {
        event.stopPropagation(); 
        const root = document.getElementById('music-player-container');
        isFolded = !isFolded;
        if (isFolded) {
            root.classList.add('folded-mode');
            document.getElementById('playlist-window').classList.remove('active');
            document.getElementById('vol-panel').classList.remove('active'); 
        } else {
            // 펼칠 때 캐릭터 transition을 잠깐 끄고, 위치 잡은 뒤 다시 켬
            charWrap.style.transition = 'none';
            root.classList.remove('folded-mode');
            requestAnimationFrame(() => {
                drawUI();
                // 위치가 잡힌 후 다음 프레임에서 transition 복원
                requestAnimationFrame(() => {
                    charWrap.style.transition = 'left 0.1s linear';
                });
            });
        }
    }
    let isDragging = false;
    function seekToPosition(e) {
        const rect = pContainer.getBoundingClientRect();
        let ratio = (e.clientX - rect.left) / rect.width;
        ratio = Math.max(0, Math.min(1, ratio));
        progress = ratio * 100;
        if (audio.duration) {
            audio.currentTime = ratio * audio.duration;
        }
        drawUI();
    }
    pContainer.addEventListener('mousedown', (e) => {
        isDragging = true;
        seekToPosition(e);
    });
    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            seekToPosition(e);
        }
    });
    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
    document.getElementById('vol-slider').addEventListener('input', (e) => {
        audio.volume = e.target.value / 100;
        saveState();
    });
    /* 페이지 이동 시 재생 상태 유지 (localStorage) */
    function saveState() {
        localStorage.setItem('music_player_state', JSON.stringify({
            index: currentTrackIndex,
            time: audio.currentTime,
            paused: audio.paused,
            volume: audio.volume,
            progress: progress
        }));
    }
    function loadState() {
        const saved = localStorage.getItem('music_player_state');
        if (saved) {
            const state = JSON.parse(saved);
            currentTrackIndex = state.index || 0;
            audio.volume = state.volume !== undefined ? state.volume : 0.5;
            document.getElementById('vol-slider').value = audio.volume * 100;
            if (tracks.length > 0 && tracks[currentTrackIndex]) {
                audio.src = tracks[currentTrackIndex].src;
                audio.currentTime = state.time || 0;
                progress = state.progress || 0;
                drawUI();
                renderPlaylist();
                if (!state.paused) {
                    audio.play().then(() => {
                        isPlaying = true;
                        pIcon.classList.replace('fa-play', 'fa-pause');
                        charWrap.classList.add('jumping');
                        mainChar.src = charPlayImg;
                        foldedArea.classList.add('jumping');
                        updateBubble();
                    }).catch(() => {
                        mainChar.src = charPauseImg;
                    });
                } else {
                    mainChar.src = charPauseImg;
                }
            }
        } else {
            mainChar.src = charPauseImg;
            renderPlaylist();
        }
    }
    audio.addEventListener('timeupdate', function() {
        if (audio.duration) {
            progress = (audio.currentTime / audio.duration) * 100;
            drawUI();
        }
        saveState();
    });
    window.addEventListener('beforeunload', saveState);
    /* 초기화: 이미지가 준비된 후 플레이어 표시 */
    function initPlayer() {
        loadState();
        requestAnimationFrame(() => {
            drawUI();
            document.getElementById('music-player-container').classList.add('ready');
        });
    }
    // 멈춤 캐릭터 이미지가 로드 완료되면 플레이어 표시
    if (preloadPause.complete) {
        initPlayer();
    } else {
        preloadPause.onload = initPlayer;
        preloadPause.onerror = initPlayer;
    }
</script>

 

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

 

- 커스텀 설명문

1. 음악 추가하기

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

*예시

const tracks = [
    { title: "노래 제목", artist: "가수", src: "mp3 주소" },
    { title: "두 번째 곡", artist: "가수", src: "mp3 주소" }// ← 새로 추가한 코드 (쉼표 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. 이미지 변경

<!-- 4. 접혔을 때 전용 캐릭터 -->
        <div id="folded-mode-area" style="display: none;" onclick="toggleFold(event)">
            <div id="folded-bubble" class="song-bubble"></div>
            <img src="캐릭터 이미지 주소" id="folded-char" class="character-img" alt="folded-char">

/* 캐릭터 이미지 주소 설정 */
    const charPlayImg = "재생 중 캐릭터 이미지";
    const charPauseImg = "정지 캐릭터 이미지";

위 코드에서 써져있는 글에 맞는 이미지 주소를 넣으면 됩니다.

--bg-main: #E4E4E4;
        /* 플레이어 본체 배경색 */
 
        --btn-bg: #B9B9B9;
        /* 버튼(이전/재생/다음) 배경색 */
 
        --icon-main: #af3b49;
        /* 버튼 안 아이콘 색상 (재생 삼각형 등) */
 
        --bar-base: #CECECE;
        /* 재생바/볼륨바 빈 부분 색상 */
 
        --bar-fill: #af3b49;
        /* 재생바/볼륨바 채워진 부분 색상 */
 
        --bar-thumb: #922532;
        /* 재생바 동그란 손잡이 색상 */
 
        --sub-icon: #ABABAB;
        /* 접기(ㅡ) 버튼, 볼륨 아이콘 색상 */
 
        --pl-box: #B9B9B9;
        /* 플레이리스트 목록 박스 배경색 */
 
        --pl-text: #7F7F7F;
        /* 플레이리스트 글자 색상 */

Color Hex Color Codes

 

편하게 사용해주세요!

만약 오류가 있다면 댓글로 문의 부탁드립니다. 감사합니다~