[Javascript] 음원 재생시간, 전체시간 표시 및 재생바 업데이트

이번에 next.js로 뮤직플레이어 기능 구현했던 것을 정리로 남겨본다.

 

먼저 전체적인 코드는 아래와 같다!

HTML, CSS

.progress {
    width: 182px;
    height: 3.2px;
    border-radius: 3px;
    background: rgba(255,255,255,0.4);
}
.pin {
    position: absolute;
    top: -5px;
    width: 16px;
    left: 96.5%;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    pointer-events: all;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
}
.bar {
    position: relative;
    background: #fff;
    /* 처음엔 0 */
    width: 0;
    height: 100%;
}


<div className="progress">
    <div className="bar">
        <span className="pin"></span>
        <audio ref={audioRef} src={audSrc} id="audio"></audio>
    </div>
</div>

 

Javascript

//재생시간, 전체시간 표시 및 재생바
const timeAudio = () => {
    // 원본 오디오 선택
    const crtAudio:any = $("#audio")[0];

    //전체시간 표시
    $("#audio").on("loadeddata", function() {
        const totTime = $(".duration");
        const duration = crtAudio.duration || 0;

        // 음원 총 재생시간 구하기
        const min = Math.floor(duration / 60);
        const sec = Math.floor(duration % 60);
        const totMin = min.toString().padStart(2, "0");
        const totSec = sec.toString().padStart(2, "0");
        totTime.text(`${totMin}:${totSec}`);
    });

    // 현재시간 표시
    $("#audio").on("timeupdate", function() {
        const playTime = $(".current");
        const progress = $(".bar");
        let ctTime = crtAudio.currentTime;
        const duration = crtAudio.duration || 0;

        // 프로그레스 바 업데이트
        const progBar = (ctTime / duration) * 100 + "%";
        progress.css("width", `${progBar}`);

        let min = Math.floor(ctTime / 60);
        let sec = Math.floor(ctTime % 60);
        let ctMin = min.toString().padStart(2, "0");
        let ctSec = sec.toString().padStart(2, "0");
        playTime.text(`${ctMin}:${ctSec}`);
    });
}

useEffect(() => {
    // 함수호출
    timeAudio(); 
    
}, [audSrc]);

 

실시간으로 변해야하는 재생시간 구할 때는 "timeupdate" 이벤트를,

실시간으로 변화될 필요 없는 전체시간 구할 때는 "loadeddata" 이벤트를 사용해야 한다.

(timeupdate 이벤트 함수 안에서 전체시간까지 업데이트하려고 하면 처음 로드되었을때는 0:00에서 시작한다.)

 

전체시간 구하기

적용하는 이벤트 제외하고는 현재시간, 전체시간 구하는 코드가 다르지 않아서 크게 어려움이 없다.

내 경우 0~9의 수는 숫자 앞에 '0'을 붙여서 02:04 이런 식으로 시간을 표시하고 싶으므로

padStart를 메서드를 이용해서 2자릿수로 문자열 길이를 제한하되, 앞에는 0이 붙게 했다.

 

현재시간 구하기

재생시간 구하는 부분도 이벤트 핸들러만 제외하고는 비슷한 구성으로 하면 되는데

재생시간은 전체시간과 다르게 계속해서 업데이트 되야하는 부분이므로

프로그래스바 너비 변경도 위 함수 라인에서 같이 해줬다.

 

현재시간 / 전체시간 나눈 값을 백분율 해주면

전체 오디오 길이에서 현재 재생시점까지의 너비값 %만큼이 계산되어 적용된다.

 

그리고 여기서 중요한 것!!

오디오 요소의 src를 반복 변경시키는 경우가 아니라면 상관없는데

나처럼 하나의 요소의 src를 계속 변경시켜서 작업해야 할 경우에는 '오디오 요소[0]' 이런 식으로 

첫번째 오디오 요소를 선택 지정해줘야 해당 요소를 통해 발생하는 이벤트를 추적할 수 있다.

 

안그러면 이렇게 현재시간, 전체시간을 제대로 못 구해온다..!