title: Audio HTML5 check if all audio elements have fully loaded
body: <p>I'm building a quiz that uses audio and is marked on the response time of the user so I want all the audio html elements to be fully loaded before the user can start the quiz.</p>
  
  <p>I just need some sort of loop that checks if ALL the audio elements have all the song/audio loaded completely.</p>
  
  <p>I've looked at <code>readyState</code> etc but I cant find its use within a loop of all the audio on the page. I would like a javascript or jQuery solution if possible.</p>
  
  <p>I thought something like below would do it but nope:</p>
  
  <pre><code>var ready_count = 0;
  var x = document.getElementsByClassName("question-audio");
      for (var i = 0; i &lt; x.length; ++i) {
          var item = x[i];
          item.addEventListener("readystatechange", function() {
          if (item.readyState == 4) {
              ready_count++;
          }
  
      }
  if(ready_count == x.length){
      //do something
  }
  </code></pre>
  
  <p>Any help appreciated.</p>