원래는 첨부파일로 mp3 를 ff0000.mp3 으로 올리면 파일이름의 색상코드대로 하단 빨간색 부분에 색상코드가 들어가게끔 스킨을 만들어서 배포하려고 했는데 심히 귀찮아서 자바스크립트 코드만 올립니다.
반응형입니다.^^
<link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet">
<style>
#playerDiv { position:fixed; left:0px; bottom:0px; height:50px; padding:0px 25px; display:flex; justify-content:space-between; align-items:center; gap:15px; box-sizing:border-box; border-top:1px solid #cccccc; background:linear-gradient(#fefefe 50%, #cccccc 50%); }
#playerDiv .player-button { color:#900000; font-size:16px; font-family:Lato; font-weight:bold; cursor:pointer; }
#playerDiv .player-timer { color:#000000; font-size:16px; font-family:Lato; font-weight:bold; }
#playerBar { display:block; height:12px; cursor:pointer; appearance:none; }
#playerBar::-webkit-progress-value { background-color:#900000; border-radius:6px; }
#playerBar::-webkit-progress-bar { background-color:#eeeeee; border-radius:6px; border:1px solid #cccccc; }
</style>
<div id="playerDiv">
<span class="player-button" onclick="mediaPlayer.play()">PLAY</span>
<span class="player-timer">00:00</span>
<progress id="playerBar"></progress>
<span class="player-timer">00:00</span>
<span class="player-button" onclick="mediaPlayer.pause()">STOP</span>
<audio id="mediaPlayer" src="https://blog.kakaocdn.net/dn/nWkUM/btsFmizmJPO/DDQPHIqL68Ow2rPJlXvqIK/tfile.mp3" autoplay loop></audio>
</div>
<script>
setInterval(() => {
if (mediaPlayer.duration > 0) {
playerBar.max = Math.floor(mediaPlayer.duration);
playerBar.value = Math.floor(mediaPlayer.currentTime);
document.querySelectorAll(".player-timer")[0].innerText = ("0" + Math.floor(mediaPlayer.currentTime / 60)).slice(-2) + ":" + ("0" + Math.floor(mediaPlayer.currentTime % 60)).slice(-2);
document.querySelectorAll(".player-timer")[1].innerText = ("0" + Math.floor(mediaPlayer.duration / 60)).slice(-2) + ":" + ("0" + Math.floor(mediaPlayer.duration % 60)).slice(-2);
}
}, 500);
playerBar.onmousedown = (event) => {
mediaPlayer.currentTime = event.offsetX * playerBar.max / playerBar.offsetWidth;
mediaPlayer.play();
}
addEventListener("resize", playerSize = function() {
playerDiv.style.width = document.documentElement.clientWidth + "px";
playerBar.style.width = playerDiv.offsetWidth - 284 + "px";
});
playerSize();
</script>
