title: Play html5 audio sound when Phone screen is off
body: <p>I am building a mobile optimized website and would like to play a sound after a counter is over. Usually, after 2 or more minutes.</p>
  
  <p>The problem is that once the phone's screen is off, the phone disables my js, and prevents the audio from playing.</p>
  
  <h2>Potential Solution:</h2>
  
  <p>I read <a href="http://forestmist.org/2010/04/html5-audio-loops/" rel="noreferrer">this</a>
  In the solution #3, u can loop 2 tracks sequentially, and the mobile phone will still play both even when screen is off.
  So the trick I found is to use that loop, but have the first sound:
  1. Be silence. Yes, complete 5min silence audio
  2. have it loop as many times required before enough time has passed for second song to play.</p>
  
  <p>So for instance, in here, silence audio will play twice before the other sound plays.
  The trick is to control the <code>max</code> variable to achieved the desired output.</p>
  
  <pre><code>var count = 0;
  var max = 2;
  document.getElementById('silence_audio').addEventListener('ended', function () {
      this.currentTime = 0;
      this.pause();
      if (count &lt; max) {
          document.getElementById('silence_audio').play();
          count++;
      } else {
          document.getElementById('audio_4').play();
      }
  }, false);
  
  document.getElementById('audio_4').addEventListener('ended', function () {
      this.currentTime = 0;
      this.pause();
      document.getElementById('silence_audio').play();
  }, false);
  </code></pre>
  
  <p>But my question is, are there any other better solutions?</p>
  
  <p>Thank you!</p>