title: Play one HTML audio element at a time
body: <p>I have many <code>audio</code> elements on a single page and I want to play just one element at a time. That is if one <code>audio</code> element is playing and I click on play on another element, the previous <code>audio</code> element should pause.</p>
  
  <p>I found a jQuery code from another question to do this but that uses an image as play/pause controls. I'm using the inbuilt <code>controls='controls'</code> attribute for the <code>audio</code> element instead. Is it possible to use jQuery to control the play/pause feature for the <code>audio</code> element in my case?</p>
  
  <p>Here is my HTML code</p>
  
  <pre><code>&lt;div&gt;
      &lt;p class="song"&gt;&lt;h3&gt;&lt;strong&gt;#1 Intro - The Oath&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;
      &lt;audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none"&gt;
          &lt;I&gt;Your browser does not support the audio element.&lt;/I&gt;
      &lt;/audio&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;p class="song"&gt;&lt;h3&gt;&lt;strong&gt;#2 A State Of Trance Year Mix 2013&lt;/strong&gt;&lt;/h3&gt;&lt;/p&gt;
      &lt;audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none"&gt;
          &lt;I&gt;Your browser does not support the audio element.&lt;/I&gt;
       &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jQuery code</p>
  
  <pre><code>$(document).ready(function() {
      var curPlaying;
  
      $(function() {
          $(".playback").click(function(e) {
              e.preventDefault();
              var song = $(this).next('audio')[0];
              if(song.paused){
                  song.play();
                  if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
              } else { song.pause(); }
              curPlaying = $(this).parent()[0].id;
          });
      });
  });
  </code></pre>
  
  <p>The jQuery code doesn't seem to be working for me.</p>