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

Popular posts from this blog

c++ - Linked List error when inserting for the last time -

java - activate/deactivate sonar maven plugin by profile? -

java - What is the difference between String. and String.this. ? -