오디오에 타이머 붙이기 > 그누보드5 팁자료실

그누보드5 팁자료실

오디오에 타이머 붙이기 정보

오디오에 타이머 붙이기

본문

https://sir.kr/g5_tip/18697 의 연속팁입니다.

 

span 의 위치와 css 는 알아서...

차례대로 재생시간, 토탈시간, 남은시간의 순입니다.

쓰고 싶지 않은 span, 예를 들어서 남은시간 타이머가 필요 없으면

restTimer 이라는 span 을 삭제해 버리면 되겠습니다.

이것이 가능한 이유는 아래의 형식으로 이프문을 걸어주었기 때문입니다.

 

if (typeof restTimer != "undefined") --- 만일 restTimer 가 존재한다면

 


<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>
추천
4

댓글 4개


리자님 레이다망에 안 걸릴 지 모르겠네요.ㅜㅠ
따지고 보면 그누팁이라기 보다는 일반팁이라서요.
트랙바까지만 올릴 생각입니다.ㅋ
전체 2,132 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT