Custom JavaScript/HTML5 player issue

Question

I've been using this custom audio player I put together with a few tutorials and solves around the Internet and have been using it for the past 2 months.

It worked 100% in Chrome, but after an update the seek bar happened to stop working.

Is this an issue on my end? or does it work for anyone else?

HTML:

 <div id="musicplayer">
      <table>
           <tr>
                <audio id="audio" src="../audio/oby/weightless/Got To Be Free.mp3"></audio>
                <td>
                     <button id="play" type="button" onclick="playPause()" ></button>
                </td>
                <td>
                     <div id="boxed" >
                          <a href="#" id="songName">Select a song from the playlist</a>
                          <p class="right" id="timeInfo">00:00</p>
                          <input type="range" step="any" id="seekbar"></input> 
                     </div>
                </td>       
           </tr>
      </table>
 </div>

JavaScript:

<script>    
    var audio = document.getElementsByTagName('audio')[0],
    div = document.getElementById('timeInfo');

     function formatTime(s, m) {
     s = Math.floor( s );    
     m = Math.floor( s / 60 );
     m = m >= 10 ? m : '0' + m;    
     s = Math.floor( s % 60 );
     s = s >= 10 ? s : '0' + s;    
     return m + ':' + s;
     }

     setInterval(function() 
     {
     div.textContent = formatTime(audio.currentTime);
     }, 100);

     seekbar.value = 0;
     var audio = document.getElementById("audio");
     var seekbar = document.getElementById('seekbar');

     function setupSeekbar() {
     seekbar.min = audio.startTime;
     seekbar.max = audio.startTime + audio.duration;
     }
     audio.ondurationchange = setupSeekbar;

     function seekAudio() {
     audio.currentTime = seekbar.value;
     }

     function updateUI() {
     var lastBuffered = audio.buffered.end(audio.buffered.length-1);
     seekbar.min = audio.startTime;
     seekbar.max = lastBuffered;
     seekbar.value = audio.currentTime;
     }
     seekbar.onchange = seekAudio;
     audio.ontimeupdate = updateUI;
     audio.addEventListener('durationchange', setupSeekbar);
     audio.addEventListener('timeupdate', updateUI);
</script>

Answer 1

Duplicate code:

audio.ondurationchange = setupSeekbar; 

and

audio.addEventListener('durationchange', setupSeekbar); 

try removing any of these lines.

and if setting seekbar value in javascript will triger onchange... you will have to remove seekbar.onchange = seekAudio;

Is your seekbar doesn't seek when user click any time? Or is there a problem on updating time. (time is updating but seekbar doesn't)?

You do not need these codes, might also cause problem one... (the seekbar update problem)

var lastBuffered = audio.buffered.end(audio.buffered.length-1); 
seekbar.min = audio.startTime; 
seekbar.max = lastBuffered; 

EDIT (offtopic): For better performance remove the code

 setInterval(function()  
 { 
 div.textContent = formatTime(audio.currentTime); 
 }, 100); 

and append this to updateUI

div.textContent = formatTime(audio.currentTime);