javascript - adding event listener to audio element doesn't work -
i have made simple music player , there 2 events 1 updating elapsed time , durationchange...elapsed time's function works fine total time function doesn't...i have looked in http://www.w3schools.com/tags/ref_av_dom.asp , durationchange standard event don't why doesn't work. thought maybe reason script defined before label elements moving scripts end of file didn't worked either.
here 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>
in 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/
Comments
Post a Comment