Soo Hwan's Blog: March 2011

Here is the code ..
 <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>
Soo Hwan's Blog

Thursday, March 24, 2011

HTML Audio Tag with Duration
