<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile-Web-App: HTML5 Video</title>
</head>
<body>
<p>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
</p>
<audio id="audio" controls="controls">
<source src="samplemusic.mp3" type="audio/mp3" />
</audio>
<p id="duration"></p>
<p id="currenttime"></p>
<script>
var myAudio = document.getElementById("audio");
var btnPlay = document.getElementById("play");
var btnPause = document.getElementById("pause");
var textduration = document.getElementById("duration");
var textcurrenttime = document.getElementById("currenttime");
btnPlay.addEventListener("click", function(){myAudio.play();}, false);
btnPause.addEventListener("click", function(){myAudio.pause();}, false);
myAudio.addEventListener("loadedmetadata",
function(){textduration.innerHTML = "Duration: " + convertTime(myAudio.duration);},
false);
myAudio.addEventListener("timeupdate",
function(){textcurrenttime.innerHTML = "Current Time: " + convertTime(myAudio.currentTime);},
false);
function convertTime(org){
var minute = Math.floor(org/60) % 60;
var second = Math.floor(org%60);
return( minute + ' : ' + second);
}
</script>
</body>
</html>
Related:
- HTML5: Display current time and duration of video
No comments:
Post a Comment