<html>
<header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var audioElement = document.getElementById('audio');
audioElement.addEventListener("durationchange", function() {
var duration_div = document.getElementById('duration');
var duration = parseInt(audioElement.duration);
var min = parseInt(duration / 60);
var sec = duration % 60;
var str = "" + min + ":" + sec;
duration_div.innerHTML = str;
}, true);
audioElement.addEventListener("timeupdate", function() {
var current_div = document.getElementById('current');
var cur_time = parseInt(audioElement.currentTime);
var min = parseInt(cur_time / 60);
var sec = cur_time % 60;
var str = "" + min + ":" + sec;
current_div.innerHTML = str;
}, true);
});
</script>
</header>
<body>
<audio id="audio" controls preload="auto" autobuffer>
<source src="test.mp3" />
</audio>
<span id="current"></span> / <span id="duration"></span>
</body>
</html>
Thursday, March 24, 2011
HTML Audio Tag with Duration
Here is the code ..
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment