title: HTML5 Audio tag on Safari has a delay
body: <p>I'm trying to accomplish a simple doodle-like behaviour, where a mp3/ogg sound rings on click, using the  html tag. It is supposed to work under Firefox, Safari and Safari iPad is very desireable.</p>
  
  <p>I've tried many approaches and have come down to this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;span id="play-blue-note" class="play blue" &gt;&lt;/span&gt;
      &lt;span id="play-green-note" class="play green" &gt;&lt;/span&gt;
  
  
      &lt;audio id="blue-note" style="display:none" controls preload="auto" autobuffer&gt; 
          &lt;source src="blue.mp3" /&gt;
          &lt;source src="blue.ogg" /&gt;
          &lt;!-- now include flash fall back --&gt;
      &lt;/audio&gt;
  
      &lt;audio id="green-note" style="display:none" controls preload="auto" autobuffer&gt; 
          &lt;source src="green.mp3" /&gt;
          &lt;source src="green.ogg" /&gt;
      &lt;/audio&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function addSource(elem, path) {
      $('&lt;source&gt;').attr('src', path).appendTo(elem);
  }
  
  $(document).ready(function() {
  
  
      $('body').delegate('.play', 'click touchstart', function() {
          var clicked = $(this).attr('id').split('-')[1];
  
          $('#' + clicked + '-note').get(0).play();
  
  
  
      });
  
  });  
  </code></pre>
  
  <p>This seems to work great under Firefox but Safari seems to have a delay whenever you click, even when you click several times and the audio file has loaded. On Safari on iPad it behaves almost unpredictably.</p>
  
  <p>Also, Safari's performance seems to improve when I test locally, I'm guessing Safari is downloading the file each time. Is this possible? How can I avoid this?
  Thanks!</p>