title: Delay in playing HTML5 audio file on mobile browsers
body: <p>I am making a web app, and i needed to add a short sound when a button is being clicked.</p>
  
  <p>the file is in mp3 format and around 24kb in size, i didnt want to use javascript to create the element so i added it to the DOM and used CSS to hide it, also i added preload="auto" so it gets loaded with the DOM</p>
  
  <pre><code>&lt;audio id="click" preload style="display:none;"&gt; 
     &lt;source src="sound/click.mp3" type="audio/mp3"&gt;
  &lt;/audio&gt;
  </code></pre>
  
  <p>in the javascript, i have something like:</p>
  
  <pre><code>var clickSound = $('#click')[0];
  </code></pre>
  
  <p>then in a function that listens to an even click on a button i have:</p>
  
  <pre><code>function(){
    clickSound.play();
  }
  </code></pre>
  
  <p>this works fine on my computer (firefox, chrome), but on mobile after clicking the trigger button, it will wait for like 3 seconds before it plays for the first time, and <em>will now play instantly after the first delayed play</em>.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>i noticed even if i navigate to the mp3 file on my mobile like this <a href="http://example.com/sound/click.mp3" rel="noreferrer">http://example.com/sound/click.mp3</a> and click on play, it still delays, seems like it had to buffer.</p>
  
  <p>anyway around this problem?</p>
  
  <h3>Complete Example:</h3>
  
  <p><a href="http://jsfiddle.net/dtggnw9f/1/show/" rel="noreferrer">Here is a jsFiddle for mobile testing.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var clickSound = document.getElementById('click');
  var play = document.getElementById('play');
  
  play.addEventListener('click', function() {
        clickSound.play();
  }, false);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;audio id="click" preload&gt;
    &lt;source src="http://scriveit.com/sound/click.mp3" type="audio/mp3"&gt;
  &lt;/audio&gt;
  
  
  &lt;input id="play" type="button" value="play sound"&gt;</code></pre>
  </div>
  </div>
  </p>