title: HTML5 Audio tag with JQuery audio
body: <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
                  $("#play-bt").click(function(){
                      $(".audio-player")[0].play();
                      $(".message").text("Music started");
                  })
  
                  $("#pause-bt").click(function(){
                      $("#audio-player")[0].pause();
                      $(".message").text("Music paused");
                  })
  
                  $("#stop-bt").click(function(){
                      $(".audio-player")[0].pause();
                      $(".audio-player")[0].currentTime = 0;
                      $(".message").text("Music Stopped");
                  })
              })
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;audio class ="audio-player" name="" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" &gt;&lt;/audio&gt;
          &lt;audio class ="audio-player" name="" src="04-zedd-stars_come_out_(terravita_remix)" &gt;&lt;/audio&gt;
  
                  &lt;div class ="message"&gt;&lt;/div&gt;
              &lt;a id = "play-bt" href="#"&gt;Play music&lt;/a&gt; | &lt;a id ="pause-bt" href="#"&gt;Pause music&lt;/a&gt; | &lt;a id ="stop-bt" href="#"&gt;Stop music&lt;/a&gt; 
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This code only plays the first audio tag, how will I be able to play the next song/track/audio tag?</p>