오디오 플레이어 기본 커스텀 정보
오디오 플레이어 기본 커스텀
본문
<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>
https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
트랙바의 css 는 https://sir.kr/pb_tip/3587 를 참고하세요.
audio 태그에서 controls 를 지우면 오디오가 보이지 않게 됩니다.
원칙적으로 비디오 태그도 동일합니다.
참고사항 : 유튜브 플레이어 기본 커스텀 - https://sir.kr/g5_tip/15814
유튜브의 경우는 progress 가 아닌 div 로 트랙바를 만들어서 약간 더 복잡합니다.^^
추천
5
5
댓글 14개
좋으네요^^
@푸른산타 감사합니다
좋은 팁 감사 합니다.
@들레아빠 감사합니다
좋은 팁 감사합니다.
@rioskjh 감사합니다
공개해 주셔서 감사합니다.
@브러운아이 감사합니다
비타주리님 팁은 항상 기대를 뛰어넘습니다.
유용한 자료를 공개해주셔서 감사합니다 ^^
유용한 자료를 공개해주셔서 감사합니다 ^^
@김철용 감사합니다
훌륭한 정보 공유해 주셔서 감사합니다.
@빅클린코드 감사합니다
필요했던 자료였는데 감사합니다.
@본연 어이쿠 감사합니다.
