title: HTML5 audio not loading sometimes
body: <p>I have a class <code>AudioClass</code> in javascript to play audio as below: (pseudo code)</p>
  
  <pre><code>var AudioClass = function() {
       this.audioElement;
       .
       .
       .
       this.load = function(audioSource) {
           this.audioElement = //create Audio, set source etc.
           this.audioElement.addEventListener("loadedmetadata", function(){
                  //some code
           });
       }
  
       this.play = function(from, to) {
           if(isNaN(this.audioElement.duration)) {    return; }  //line 1
           this.audioElement.currentTime = from/1000;   //line 2   //from &amp; to in milliseconds  
           setTimeout(function() {
                 //pause audio.
           }, to-from);
       }
  }
  </code></pre>
  
  <p>And I am using the <code>Audio</code> as below:</p>
  
  <pre><code>/* the below lines are executed on document load. (playing background music) */
  var audioInstance = new AudioClass();
  audioInstance.load(audioSrc);
  audioInstance.play(20000);   //line 3  //20 seconds
  
  /* the below line is used at other places whenever i need sound */
  audioInstance.play(40000);   //40 seconds
  </code></pre>
  
  <p>When I am trying to play audio at "line 3", sometimes audio is not loaded by that time, so it is throwing <code>INVALID_STATE_ERR. DOM EXCEPTION 11 at line 2</code>. When I checked the audio duration, it was <code>NaN</code>. So I added "line 1" to check whether the duration <code>isNaN()</code> or not, so that it doesn't try to set <code>currentTime</code> until the audio is loaded. </p>
  
  <p>The problem here is sometimes the duration of audio is always NaN. How to fix this?</p>