APSWM

내 홈에서 사용중인 뮤직 플레이어

마우스 드래그로 이동 가능 / 재생중인 음악 끊기지 않음 / 모바일 지원

css 수정 디자인 추가 및 편집 맘대루 하세요 저도 다른 사람들꺼 보고 참고해서 만든거기 때문에...

See the Pen Untitled by 123 (@123-the-scripter) on CodePen.

초보자를 위한 복붙 가이드

HTML

해당 코드블럭 내용전체를 복사하여 티스토리 스킨 편집 > html편집 클릭 > 빈 곳 아무데나 (맨 아래 추천) 붙여넣기

이것만 적용하시면 못생긴게 떠다닙니다 아래 CSS까지 적용해야 됩니다

** 'song1.mp3', 'song2.mp3', 'song3.mp3' 이자리에 확장자명 .mp3인 파일을 집어넣으면 재생됩니다

티스토리 글쓰기 > 넣고싶은 음원 파일 mp3파일 삽입 > 해당 파일의 링크 복사 > songN.mp3 자리에 붙여넣기

<!-- MP3 Player -->
<div class="mp3-player" id="music-player">
    <button class="mp3-player-btn" id="prev">|◁</button>
    <button class="mp3-player-btn" id="play-pause">▶</button>
    <button class="mp3-player-btn" id="next">▷|</button>
</div>

<!-- MP3 Player JavaScript -->
<script>
    const audioFiles = [
        'song1.mp3',
        'song2.mp3',
        'song3.mp3'
    ];

    let currentTrackIndex = parseInt(localStorage.getItem('currentTrackIndex')) || 0;
    let isPlaying = localStorage.getItem('isPlaying') === 'true';

    const audio = new Audio(audioFiles[currentTrackIndex]);

    if (isPlaying) {
        audio.play().catch(() => {
            console.log('Auto-play blocked by browser policy.');
        });
    }

    const playPauseButton = document.getElementById('play-pause');
    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');
    const musicPlayer = document.getElementById('music-player');

    const updatePlayPauseButton = () => {
        playPauseButton.textContent = isPlaying ? '❚❚' : '▶';
    };

    const playTrack = () => {
        audio.play().then(() => {
            isPlaying = true;
            localStorage.setItem('isPlaying', 'true');
            updatePlayPauseButton();
        }).catch((err) => {
            console.error('Playback failed:', err);
        });
    };

    const pauseTrack = () => {
        audio.pause();
        isPlaying = false;
        localStorage.setItem('isPlaying', 'false');
        updatePlayPauseButton();
    };

    const switchTrack = (index) => {
        audio.pause();
        currentTrackIndex = (index + audioFiles.length) % audioFiles.length;
        localStorage.setItem('currentTrackIndex', currentTrackIndex);
        audio.src = audioFiles[currentTrackIndex];
        if (isPlaying) {
            audio.play().catch(() => {
                console.log('Auto-play blocked.');
            });
        }
    };

    playPauseButton.addEventListener('click', () => {
        isPlaying ? pauseTrack() : playTrack();
    });

    prevButton.addEventListener('click', () => {
        switchTrack(currentTrackIndex - 1);
    });

    nextButton.addEventListener('click', () => {
        switchTrack(currentTrackIndex + 1);
    });

    updatePlayPauseButton();

    // 이전 재생 시간 불러오기
    window.addEventListener('beforeunload', () => {
        localStorage.setItem('currentTime', audio.currentTime);
    });

    const savedTime = localStorage.getItem('currentTime');
    if (savedTime) audio.currentTime = parseFloat(savedTime);

    // 드래그 기능
    let isDragging = false;
    let offsetX, offsetY;

    const savePlayerPosition = () => {
        const rect = musicPlayer.getBoundingClientRect();
        localStorage.setItem('playerPosition', JSON.stringify({ top: rect.top, left: rect.left }));
    };

    const loadPlayerPosition = () => {
        const position = JSON.parse(localStorage.getItem('playerPosition'));
        if (position) {
            musicPlayer.style.top = `${position.top}px`;
            musicPlayer.style.left = `${position.left}px`;
            musicPlayer.style.right = 'auto';
            musicPlayer.style.bottom = 'auto';
        }
    };

    musicPlayer.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - musicPlayer.getBoundingClientRect().left;
        offsetY = e.clientY - musicPlayer.getBoundingClientRect().top;
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            musicPlayer.style.left = `${e.clientX - offsetX}px`;
            musicPlayer.style.top = `${e.clientY - offsetY}px`;
            musicPlayer.style.right = 'auto';
            musicPlayer.style.bottom = 'auto';
        }
    });

    document.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            savePlayerPosition();
        }
    });

    loadPlayerPosition();
</script>

CSS

해당 코드블럭 내용전체를 복사하여 티스토리 스킨 편집 > html편집 클릭 > 최상단의 CSS 클릭 > 빈 곳 아무데나 (맨 아래 추천) 붙여넣기

쉽게 변경 가능한 요소

.mp3-player의 height (플레이어 박스 높이) width (플레이어 박스 넓이)
mp3-player의 background-color(플레이어 박스 색상) : html 색상코드 사이트에서 원하는 색으로 변경 가능
mp3-player의 box-shadow (그림자 설정) : rgb값 조절하여 색상 변경 + 투명도 조절 가능
mp3-player button의 font-size(재생/일시정지 뒤로가기 앞으로가기 크기 변경 가능)
mp3-player button:hover의 color(마우스 올렸을 때 버튼 색상 변화)

.mp3-player {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 40px;
    width: 120px;
    border-radius: 10px;
    background-color: #f0f0f0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    cursor: grab;
}

.mp3-player:active {
    cursor: grabbing;
}

.mp3-player button {
    background: none;
    border: none;
    font-size: 15px;
    cursor: pointer;
}

.mp3-player button:focus {
    outline: none;
}

.mp3-player button:hover {
    color: #ccc;
}

CSS를 <style>로 묶어서 html에 한번에 집어넣는 방법도 있는데 그렇게 하면 설정값이 em인 애들의 크기가 들쑥날쑥해지더라고요 그래도 나는 어려워서 못하겠다 하시는 분들을 위해 HTML 통합 코드도 달아놓습니다

HTML 통합

<div id="music-player-wrapper">
    <div class="mp3-player" id="music-player">
        <button class="mp3-player-btn" id="prev">|◁</button>
        <button class="mp3-player-btn" id="play-pause">▶</button>
        <button class="mp3-player-btn" id="next">▷|</button>
    </div>
</div>

<style>
    .mp3-player {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 40px;
    width: 120px;
    border-radius: 10px;
    background-color: #f0f0f0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    cursor: grab;
    }

    .mp3-player:active {
        cursor: grabbing;
    }

    .mp3-player button {
        background: none;
        border: none;
        font-size: 15px;
        cursor: pointer;
    }

    .mp3-player button:focus {
        outline: none;
    }

    .mp3-player button:hover {
        color: #ccc;
    }
</style>

<!-- MP3 Player JavaScript -->
<script>
    const audioFiles = [
        'song1.mp3',
        'song2.mp3',
        'song3.mp3'
    ];

    let currentTrackIndex = parseInt(localStorage.getItem('currentTrackIndex')) || 0;
    let isPlaying = localStorage.getItem('isPlaying') === 'true';

    const audio = new Audio(audioFiles[currentTrackIndex]);

    if (isPlaying) {
        audio.play().catch(() => {
            console.log('Auto-play blocked by browser policy.');
        });
    }

    const playPauseButton = document.getElementById('play-pause');
    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');
    const musicPlayer = document.getElementById('music-player');

    const updatePlayPauseButton = () => {
        playPauseButton.textContent = isPlaying ? '❚❚' : '▶';
    };

    const playTrack = () => {
        audio.play().then(() => {
            isPlaying = true;
            localStorage.setItem('isPlaying', 'true');
            updatePlayPauseButton();
        }).catch((err) => {
            console.error('Playback failed:', err);
        });
    };

    const pauseTrack = () => {
        audio.pause();
        isPlaying = false;
        localStorage.setItem('isPlaying', 'false');
        updatePlayPauseButton();
    };

    const switchTrack = (index) => {
        audio.pause();
        currentTrackIndex = (index + audioFiles.length) % audioFiles.length;
        localStorage.setItem('currentTrackIndex', currentTrackIndex);
        audio.src = audioFiles[currentTrackIndex];
        if (isPlaying) {
            audio.play().catch(() => {
                console.log('Auto-play blocked.');
            });
        }
    };

    playPauseButton.addEventListener('click', () => {
        isPlaying ? pauseTrack() : playTrack();
    });

    prevButton.addEventListener('click', () => {
        switchTrack(currentTrackIndex - 1);
    });

    nextButton.addEventListener('click', () => {
        switchTrack(currentTrackIndex + 1);
    });

    updatePlayPauseButton();

    // 이전 재생 시간 불러오기
    window.addEventListener('beforeunload', () => {
        localStorage.setItem('currentTime', audio.currentTime);
    });

    const savedTime = localStorage.getItem('currentTime');
    if (savedTime) audio.currentTime = parseFloat(savedTime);

    // 드래그 기능
    let isDragging = false;
    let offsetX, offsetY;

    const savePlayerPosition = () => {
        const rect = musicPlayer.getBoundingClientRect();
        localStorage.setItem('playerPosition', JSON.stringify({ top: rect.top, left: rect.left }));
    };

    const loadPlayerPosition = () => {
        const position = JSON.parse(localStorage.getItem('playerPosition'));
        if (position) {
            musicPlayer.style.top = `${position.top}px`;
            musicPlayer.style.left = `${position.left}px`;
            musicPlayer.style.right = 'auto';
            musicPlayer.style.bottom = 'auto';
        }
    };

    musicPlayer.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - musicPlayer.getBoundingClientRect().left;
        offsetY = e.clientY - musicPlayer.getBoundingClientRect().top;
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            musicPlayer.style.left = `${e.clientX - offsetX}px`;
            musicPlayer.style.top = `${e.clientY - offsetY}px`;
            musicPlayer.style.right = 'auto';
            musicPlayer.style.bottom = 'auto';
        }
    });

    document.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            savePlayerPosition();
        }
    });

    loadPlayerPosition();
</script>

드래그 이동 가능한 플로팅 오디오 플레이어

티스토리툴바