title: HTML5 Audio: How to Play only a Selected Portion of an Audio File (audio sprite)?
body: <p>I'm working on an iOS metronome web app. Since mobile Safari can only play <a href="http://24ways.org/2010/the-state-of-html5-audio" rel="nofollow noreferrer">one sound at a time</a>, I'm attempting to create an 'audio sprite' - where I can use different segments of a single audio track to generate different sounds. I have a 1 second clip with 2 half-second sounds on it.</p>
  <pre><code>&lt;audio id=&quot;sample&quot; src=&quot;sounds.mp3&quot;&gt;&lt;/audio&gt;
  
  &lt;a href=&quot;javascript:play1();&quot;&gt;Play1&lt;/a&gt;
  &lt;a href=&quot;javascript:play2();&quot;&gt;Play2&lt;/a&gt;
  &lt;a href=&quot;javascript:pauseAudio();&quot;&gt;Pause&lt;/a&gt;
  
  &lt;script&gt;
  var audio = document.getElementById('click');
  
  function play1(){
      audio.currentTime = 0;
      audio.play();
  
      // This is the problem area
      audio.addEventListener('timeupdate', function (){
          if (currentTime &gt;= 0.5) {
              audio.pause();
          }
      }, false);
  }   
  
  function play2(){
      audio.currentTime = 0.5;
      audio.play();
  }
  
  function pause(){
      audio.pause();
  }
  &lt;/script&gt;
  </code></pre>
  <p>See it on <a href="http://jsfiddle.net/e72bW/4/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  <p>As you can see, I've attempted to use the 'timeupdate' event (<a href="http://groups.google.com/group/jplayer/browse_thread/thread/c92f09c0db2ca580?fwc=1" rel="nofollow noreferrer">jPlayer example</a>) with no avail.</p>
  <p>I've seen <a href="http://remysharp.com/2010/12/23/audio-sprites/" rel="nofollow noreferrer">Remy Sharp's post on audio sprites</a>, but (A) I wasn't able to get it to work for me, and (B) I would prefer to stay away from a library dependency.</p>
  <p>Any ideas?</p>
  <hr />
  <p><em><strong>Update</strong></em></p>
  <p>I now have it working using <code>setInterval</code>:</p>
  <pre><code>function play1(){
      audio.currentTime = 0;
      audio.play();
      int = setInterval(function() {
          if (audio.currentTime &gt; 0.4) {
              audio.pause();
              clearInterval(int);
          }
      }, 10);
  }    
  
  function play2(){
      clearInterval(int);
      audio.currentTime = 0.5;
      audio.play();
  }
  </code></pre>
  <p>There are some issues with sequence and setting/clearing intervals, but for my purpose - it seems to work.</p>
  <p><a href="http://jsfiddle.net/e72bW/5/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p>P.S. If anyone has a fix for this, this could be used in Games and Interface Sound FX.</p>