title: How do I delay playing of HTML5 audio, but ignore the delay from loading the audio file?
body: <p>I would like an HTML5 audio sample to play 10 seconds after a page has loaded, to coincide with a CSS transition on the page. This works fine locally, however when loading the web page in a live environment there is a 1-2 second delay as the audio is loaded and it seems the JavaScript below takes the 10 seconds from when the <em>audio</em> has loaded rather than from when the <em>page</em> is initially loaded.</p>
  
  <p>Please could someone advise how I can make sure the audio plays 10 seconds in (which is plenty time to load the audio file itself) at the exact point the transition occurs, rather than taking the 10 seconds from when the audio itself loads?</p>
  
  <p>The header which appears at 10 seconds:</p>
  
  <pre><code>h1
  {
      position: absolute;
      width: 2.6em;
      left: 50%;
      top: 25%;
      font-size: 10em;
      text-align: center;
      margin-left: -1.3em;
      line-height: 0.8em;
      letter-spacing: -0.05em;
      color: #000;
      text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
      opacity: 0;
      z-index: 1;
      -webkit-animation: logo 5s ease-out 10s;
      -moz-animation: logo 5s ease-out 10s;
      -ms-animation: logo 5s ease-out 10s;
      -o-animation: logo 5s ease-out 10s;
      animation: logo 5s ease-out 10s;
  }
  </code></pre>
  
  <p>The HTML for the audio:</p>
  
  <pre><code>&lt;audio id="theme" preload="auto" controls&gt;
      &lt;source src="audio/sound.mp3" type="audio/mp3"&gt;
      Your browser does not support the audio element.
  &lt;/audio&gt;
  </code></pre>
  
  <p>The JavaScript:</p>
  
  <pre><code>function playtheme() {
      document.getElementById('theme').play();
  }
  
  function playaudio() {
      setTimeout("playtheme()", 10000);
  }
  </code></pre>