title: Playing many audio files off the same audio element
body: <p>I'm building a web page to preview songs letting the viewing public listen to a snippet of each song.</p>
  
  <p>What i dont want to do is reinvent the wheel by creating many calls to many audio elements, you can see how I use "sample" as the first but i don't wanna keep repeating code over and over again.</p>
  
  <p>Here's how it currently works:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              div{
                  display: none;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;audio id="sample" src="BACKING unforgettable fire.mp3" controls preload&gt;
                  &lt;p&gt;Your browser does not support the audio element&lt;/p&gt;
              &lt;/audio&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;a href="javascript:playSegment(10, 35);"&gt;BACKING unforgettable fire - &lt;img src="http://www.auctioneerslive.co.uk/music/play.png"&gt;&lt;/a&gt;
          &lt;script&gt;
              var audio = document.getElementById('sample');
              var segmentEnd;
              audio.addEventListener('timeupdate', function (){
                  if (segmentEnd &amp;&amp; audio.currentTime &gt;= segmentEnd){
                      audio.pause();
                  }
                  console.log(audio.currentTime);
              }, false);
              function playSegment(startTime, endTime){
                  segmentEnd = endTime;
                  audio.currentTime = startTime;
                  audio.play();
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>