title: Why does audio.buffered.end(0) get an error message when I try to get buffered time
body: <p>I'm building mp3 playlist player with HTML5 and jQuery. At this player there is a horizontal bar grow gradually in conjunction with the buffered present of mp3 file.</p>
  
  <p>here is my full code:
  <a href="http://jsfiddle.net/zuhairtaha/d9oj3dan/" rel="noreferrer">get buffered end</a></p>
  
  <p>HTML5:</p>
  
  <pre><code>&lt;audio id="music" controls&gt;
    &lt;source src="https://archive.org/download/musicTestAudio27/Very%20nice%20%2827%29.mp3" type="audio/mpeg"&gt;
  &lt;/audio&gt;
      &lt;br/&gt;
      &lt;div id="buffered"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#buffered{
      border:solid #ccc 1px;
      height:10px;
      background:red;
      display:block;
      width:1%;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var track = document.getElementById("music");
  setInterval(function(){
  var w = 100*(track.buffered.end(0))/track.duration;
  $('#buffered').css("width",w+"%");
  }, 1000);
  </code></pre>
  
  <p>but Firefox give me an error message said:</p>
  
  <blockquote>
    <p>IndexSizeError: Index or size is negative or greater than the allowed
    amount</p>
    
    <p>var w = 100*(track.buffered.end(0))/track.duration;</p>
  </blockquote>
  
  <p>and Google chrome said:</p>
  
  <blockquote>
    <p>Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The
    index provided (0) is greater than or equal to the maximum bound (0).</p>
  </blockquote>