페이지 하단 커스텀 플레이어 정보
페이지 하단 커스텀 플레이어관련링크
본문
2024년 03월 08일 게시판 스킨용으로도 제작 - https://sir.kr/g5_skin/58663
----------
원래는 첨부파일로 mp3 를 ff0000.mp3 으로 올리면 파일이름의 색상코드대로 하단 빨간색 부분에 색상코드가 들어가게끔 스킨을 만들어서 배포하려고 했는데 심히 귀찮아서 자바스크립트 코드만 올립니다.
반응형입니다.^^
그누게시글 - http://wittazzurri.phps.kr/add_board/45
일반페이지 - https://wittazzurri.com/media/6/
<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>
추천
5
5
댓글 15개
감사 합니다.
@들레아빠 감사합니다.
페이지 이동시에도 이어서 연속재생이 되도록 해볼려고 했는데... 안되네요.. 방법이 있나요 iframe 없이
@빠왕 세션스토리지에 오디오의 src 와 currentTime 을 가지고 넘어가면 되지 않을까요?
@비타주리 특정게시판에서만 적용하려고 여러가지 자료 찾아보고 해봤는데 모두 안되네요.. 실력이 부족이라
에고 내일쯤 귀찮더라도 게시판스킨으로 공유할게요.
감사합니다.
@아이스웨덴™ 감사합니다.
역시~~~ 감사합니다
@하늘아래구름 역시 흔적에 감사드립니다.
항상감사드립니다
잘사용하겠습니다
혹시 아래 스킨은 받을수 있나요
HTML에디터 아이프레임
http://wittazzurri.phps.kr/add_board/44
@비타주리님 감사합니다
감사합니다
@DawnDew 감사합니다