오디오 플레이어 기본 커스텀
[code]
<audio id="myAudio" src="https://blog.kakaocdn.net/dn/bAFf9r/btrsSa2qlFx/gdkKcZIgLJGAiMIZTRoEEk/tfile.mp3" autoplay loop controls></audio>
<br>
<progress id="myBar" style="width:300px;cursor:pointer" value="0" min="0" max="0"></progress>
<br>
<button style="cursor:pointer" onclick="myAudio.play()">재생</button>
<button style="cursor:pointer" onclick="myAudio.pause()">정지</button>
<br>
<span id="currentTimer">00:00</span>
<span id="totalTimer">00:00</span>
<script>
myBar.onclick = (e) => {
myAudio.currentTime = e.offsetX;
myAudio.play();
}
setInterval(() => {
if (myAudio.duration > 0) {
myBar.value = myAudio.currentTime;
myBar.max = myAudio.duration;
currentTimer.innerText = ("0" + Math.floor(myAudio.currentTime / 60)).slice(-2) + ":" + ("0" + Math.floor(myAudio.currentTime % 60)).slice(-2);
totalTimer.innerText = ("0" + Math.floor(myAudio.duration / 60)).slice(-2) + ":" + ("0" + Math.floor(myAudio.duration % 60)).slice(-2);
}
}, 25);
</script>
[/code]
https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
트랙바의 css 는 https://sir.kr/pb_tip/3587 를 참고하세요.
audio 태그에서 controls 를 지우면 오디오가 보이지 않게 됩니다.
원칙적으로 비디오 태그도 동일합니다.
참고사항 : 유튜브 플레이어 기본 커스텀 - https://sir.kr/g5_tip/15814
유튜브의 경우는 progress 가 아닌 div 로 트랙바를 만들어서 약간 더 복잡합니다.^^
댓글 15개
유용한 자료를 공개해주셔서 감사합니다 ^^
사용해보니 좋아요 잘 쓰겠습니다