title: Jquery "Uncaught IndexSizeError: Failed to execute" error
body: <p>I'm trying to use the <a href="http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/" rel="nofollow noreferrer">AudioPlayer.js</a> jquery plugin within my custom wordpress theme. Before trying to use this within Wordpress, it was working perfect in my basic html/css test site, with no errors.</p>
  
  <p>Now that it's within my WP theme, I'm getting this error when looking in Chrome Dev Tools:</p>
  
  <pre><code>Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges':
    The index provided (0) is not less than the object's length (0).
  </code></pre>
  
  <p>And it's continuously trying to run, and Chrome keeps counting how many times it's trying to: I'm up to 22,000 attempts and counting as I type this. It also says it's because of line 103 within the Audioplayer.js file. Line 103 is:</p>
  
  <pre><code>barLoaded.width( ( theAudio.buffered.end( 0 ) / theAudio.duration ) * 100 + '%' );
  </code></pre>
  
  <p>I know that probably won't mean much without the whole plugin, so I've uploaded the full plugin <a href="http://pastebin.com/G2YjyaJy" rel="nofollow noreferrer">here on Pastebin</a>. I know it's not ideal to link to outside sites when asking questions, but I didn't want to post that much code here. Here's a screenshot of the error in Chrome Dev Tools:</p>
  
  <p><img src="https://i.stack.imgur.com/V3J4w.jpg" alt="enter image description here"></p>
  
  <p>I've made sure that Jquery is being called in the head, before the plugin is called in the footer using this code:</p>
  
  <pre><code>&lt;script&gt;jQuery( function() { jQuery( 'audio' ).audioPlayer(); } );&lt;/script&gt;
  </code></pre>
  
  <p>Can anyone give me some ideas on what might be causing this?  Thanks!</p>