웹 페이지에서 오디오를 재생할 때 현재 재생 위치, 즉 타임스탬프를 분 단위와 초 단위로 확인하고 싶은 경우가 있습니다. HTML5에서 제공하는 <audio> 요소의 currentTime 속성을 활용하면 이를 손쉽게 구현할 수 있습니다.
핵심 개념
오디오 플레이어의 현재 재생 시간은 audio.currentTime 속성으로 초 단위 숫자 값으로 반환됩니다. 이 값을 활용하여 다음과 같이 계산할 수 있습니다.
- 분(Minutes):
Math.floor(audio.currentTime / 60)— 전체 초를 60으로 나눈 몫 - 초(Seconds):
Math.floor(audio.currentTime % 60)— 60으로 나눈 나머지
예제 코드
다음은 HTML 오디오 플레이어의 현재 타임스탬프를 구문 분석하여 화면에 표시하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Show Current time stamp of an HTML audio player</h1>
<audio class="audio" src="C:\Users\titan\Downloads\sample.mp3" controls></audio>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get the audio timestamp</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let audioEle = document.querySelector(".audio");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "Minutes = " + Math.floor(audioEle.currentTime / 60) + " ";
resEle.innerHTML += "Seconds = " + Math.floor(audioEle.currentTime % 60) + " ";
});
</script>
</body>
</html>코드 설명
<audio>요소에controls속성을 추가하여 기본 재생 컨트롤을 표시합니다.- 버튼을 클릭하면
addEventListener("click", ...)에 등록된 콜백 함수가 실행됩니다. Math.floor()를 사용해 소수점 이하를 버리고 정수 형태의 분과 초 값을 계산합니다.- 계산된 결과는
.result클래스를 가진 div 요소의innerHTML에 출력됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
오디오를 재생한 후 잠시 뒤 'CLICK HERE' 버튼을 클릭하면 현재 재생 중인 시간이 분과 초 단위로 표시됩니다.
추가 팁
버튼 클릭 없이 실시간으로 타임스탬프를 갱신하고 싶다면, 오디오 요소의 timeupdate 이벤트를 활용하는 방법도 좋습니다. 이 이벤트는 재생 위치가 변경될 때마다 발생하므로, 해당 이벤트 리스너 안에 위의 계산 로직을 넣으면 자동으로 갱신되는 타이머를 만들 수 있습니다.