Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript to parse and show current time stamp of an HTML audio player.
The HTML audio element provides a currentTime property that returns the current playback position in seconds. We can parse this value to display minutes and seconds separately.
HTML Audio currentTime Property
The currentTime property returns a floating-point number representing the current playback time in seconds. We can use Math.floor() to convert it into readable minutes and seconds format.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audio Timestamp Parser</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 20px;
font-weight: 500;
margin: 20px 0;
padding: 10px;
border: 2px solid green;
border-radius: 5px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
audio {
width: 100%;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Show Current Timestamp of HTML Audio Player</h1>
<audio class="audio" controls>
<source src="/html/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button class="btn">Get Current Timestamp</button>
<div class="result">Click the button to get audio timestamp</div>
<script>
let resEle = document.querySelector(".result");
let btnEle = document.querySelector(".btn");
let audioEle = document.querySelector(".audio");
btnEle.addEventListener("click", () => {
let currentTime = audioEle.currentTime;
let minutes = Math.floor(currentTime / 60);
let seconds = Math.floor(currentTime % 60);
// Format with leading zeros
let formattedMinutes = minutes.toString().padStart(2, '0');
let formattedSeconds = seconds.toString().padStart(2, '0');
resEle.innerHTML = `Current Time: ${formattedMinutes}:${formattedSeconds}`;
resEle.innerHTML += `<br>Total seconds: ${Math.floor(currentTime)}`;
});
// Optional: Update timestamp in real-time
audioEle.addEventListener('timeupdate', () => {
let currentTime = audioEle.currentTime;
let minutes = Math.floor(currentTime / 60);
let seconds = Math.floor(currentTime % 60);
let formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
console.log(`Real-time: ${formattedTime}`);
});
</script>
</body>
</html>
How It Works
The code uses the following approach:
-
audioEle.currentTime- Gets current playback position in seconds -
Math.floor(currentTime / 60)- Calculates minutes by dividing by 60 -
Math.floor(currentTime % 60)- Calculates remaining seconds using modulo -
padStart(2, '0')- Adds leading zeros for proper time format (e.g., "01:05")
Real-time Updates
For continuous timestamp updates, you can use the timeupdate event which fires as the audio plays:
audioEle.addEventListener('timeupdate', function() {
let minutes = Math.floor(this.currentTime / 60);
let seconds = Math.floor(this.currentTime % 60);
let timestamp = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
console.log('Current timestamp:', timestamp);
});
Output
When you play the audio and click the button, you'll see formatted timestamps like:
Current Time: 01:25 Total seconds: 85
Conclusion
Use the currentTime property with basic math operations to parse audio timestamps. The timeupdate event enables real-time timestamp tracking during playback.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements