adding event listener to audio element doesn't work
Question
i have made a simple music player and there is 2 events for it one for updating elapsed time and another for durationchange...elapsed time's function works fine but total time function doesn't...i have looked up in http://www.w3schools.com/tags/ref_av_dom.asp and durationchange is a standard event but i don't get it why it doesn't work. i also thought maybe the reason is that script is defined before label elements but moving scripts to the end of file didn't worked either.
here is my code:
<!DOCType HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script type="text/JavaScript">
var audio = document.createElement("audio");
audio.id = "audio1"
audio.src = "Music.mp3";
audio.autoplay = true;
window.onload = function () {
audio.addEventListener('timeupdate', UpdateTheTime, false);
audio.addEventListener('durationchange', SetTotal, false);
}
function UpdateTheTime() {
var sec = audio.currentTime;
var min = Math.floor(sec / 60);
sec = Math.floor(sec % 60);
if (sec.toString().length < 2) sec = "0" + sec;
if (min.toString().length < 2) min = "0" + min;
document.getElementById('Elapsed').innerHTML = min + ":" + sec;
}
function SetTotal() {
var sec = audio.duration;
var min = Math.floor(sec / 60);
sec = Math.floor(sec % 60);
if (sec.toString().length < 2) sec = "0" + sec;
if (min.toString().length < 2) min = "0" + min;
document.getElementById('Total').innerHTML = "/ " + min + " : " + sec;
}
</script>
</head>
<body>
<form action="/" id="player">
<img src="Cover.jpg"/>
<label id="Title">
Imaginaerum
</label>
<label id="Artist">
Nightwish
</label>
<label id="Elapsed">--:--</label>
<label id="Total">/--:--</label>
</form>
</body>
</html>
1 answers
solution1
1 ACCPTED 2013-08-26 12:58:38
In your case durationchange event fired before window.onload
var audio;
window.onload = function () {
audio= document.createElement("audio");
audio.id = "audio1"
audio.src = "Music.mp3";
audio.autoplay = true;
audio.addEventListener('timeupdate', UpdateTheTime, false);
audio.addEventListener('durationchange', SetTotal, false);
}
function UpdateTheTime() {
var sec = audio.currentTime;
var min = Math.floor(sec / 60);
sec = Math.floor(sec % 60);
if (sec.toString().length < 2) sec = "0" + sec;
if (min.toString().length < 2) min = "0" + min;
document.getElementById('Elapsed').innerHTML = min + ":" + sec;
}
function SetTotal() {
var sec = audio.duration;
var min = Math.floor(sec / 60);
sec = Math.floor(sec % 60);
if (sec.toString().length < 2) sec = "0" + sec;
if (min.toString().length < 2) min = "0" + min;
document.getElementById('Total').innerHTML = "/ " + min + " : " + sec;
}
Example http://jsfiddle.net/rU7SU/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.