audio 타이머 붙이기 > 팁

• 목록

<audio id=myAudio src="https://blog.kakaocdn.net/dn/c4djm7/btrET8xkkOc/89VxkXWg4wSOrnwWPKsJqK/tfile.mp3" loop></audio>
<img id=myImg style=cursor:pointer;display:block>
<span id=currentTimer>00:00</span>
<span id=totalTimer>00:00</span>
<span id=restTimer>00:00</span>
<script>
onImg = "https://blog.kakaocdn.net/dn/wZ0tS/btrEOGJvjIE/8dv2ALyvIwk7cGS4p1Pkd0/img.png";
offImg = "https://blog.kakaocdn.net/dn/qrTkp/btrEN9SGsPz/0ztiKLUfAkLnmJON7nwc91/img.png";
function playAudio() {
    myImg.src = offImg;
    myAudio.play();
}
function pauseAudio() {
    myImg.src = onImg;
    myAudio.pause();
}
myImg.onclick = function() {
    myAudio.paused ? playAudio() : pauseAudio();
}
myImg.src = onImg;
function trackMode() {
    if (myAudio.currentTime > 0) {
if (typeof currentTimer != "undefined") currentTimer.innerText = ("0" + Math.floor(myAudio.currentTime / 60)).slice(-2) + ":" + ("0" + Math.floor(myAudio.currentTime % 60)).slice(-2);
if (typeof totalTimer != "undefined") totalTimer.innerText = ("0" + Math.floor(myAudio.duration / 60)).slice(-2) + ":" + ("0" + Math.floor(myAudio.duration % 60)).slice(-2);
        if (typeof restTimer != "undefined") restTimer.innerText = ("0" + Math.floor((myAudio.duration - myAudio.currentTime) / 60)).slice(-2) + ":" + ("0" + Math.floor((myAudio.duration - myAudio.currentTime) % 60)).slice(-2);
    }
}
setInterval(trackMode, 500);
</script>

00:00 00:00 00:00