title: Preload audio and apply css during playback
body: <p>I am looking to create sound buttons.</p>
  
  <p>Have used the answer here:
  <a href="https://stackoverflow.com/questions/31715188/buttons-click-sounds">Buttons click Sounds</a></p>
  
  <p>and implemented it so that the buttons are divs and created dynamically from a MySQL DB.</p>
  
  <p>Does anyone know how to preload that list of sounds on page load?</p>
  
  <p>Also, I want to apply a CSS class to the div when clicked and then when the audio finishes, want it to switch back to the original CSS class.</p>
  
  <p>This is what I have tried. The sounds play correctly but the onended fuction does not fire.</p>
  
  <pre><code>    &lt;script type='text/javascript'&gt;
      $(window).load(function(){
      var baseUrl = "http://[URL HERE]";
      var audio = [&lt;?php echo $audiostring; ?&gt;];
  
      $('div.ci').click(function() {
          var i = $(this).attr('id').substring(1);
          mySound = new Audio(baseUrl + audio[i-1]).play();       
          mySound.onended = function() {
          alert("The audio has ended");};
  
      });
      });
  
      &lt;/script&gt;
  </code></pre>