title: Play and pause one HTML5 audio element at a time via jQuery
body: <p>I've got several HTML5 audio elements on a page and am using jQuery to play and pause them. The play and pause functions work appropriately, but the tracks can all be played at the same time.</p>
  
  <p>How can I rewrite this code so that only one song can be played at a time? That is.. if one is playing and you click on another, pause the previous and play the most recent click.</p>
  
  <p>Thank you!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="music_right"&gt;
          &lt;div class="thumbnail" id="paparazzi"&gt;
              &lt;a class="playback"&gt;
                  &lt;img class="play" src="http://www.lucisz.com/imgs/play.png" /&gt;
              &lt;/a&gt;
              &lt;audio&gt;
               &lt;source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /&gt;
                  &lt;source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /&gt;
                  Your browser does not support HTML5 audio.
              &lt;/audio&gt;
          &lt;/div&gt;
          &lt;div class="thumbnail" id="danceinthedark"&gt;
              &lt;a class="playback"&gt;
                  &lt;img class="play" src="http://www.lucisz.com/imgs/play.png" /&gt;
              &lt;/a&gt;
              &lt;audio&gt;
               &lt;source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" /&gt;
                  &lt;source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" /&gt;
                  Your browser does not support HTML5 audio.
              &lt;/audio&gt;
          &lt;/div&gt;
          &lt;div class="thumbnail" id="bornthisway"&gt;
              &lt;a class="playback"&gt;
                  &lt;img class="play" src="http://www.lucisz.com/imgs/play.png" /&gt;
              &lt;/a&gt;
              &lt;audio&gt;
               &lt;source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" /&gt;
                  &lt;source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" /&gt;
                  Your browser does not support HTML5 audio.
              &lt;/audio&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript: (that works, but plays/pauses individually)</p>
  
  <pre><code>$(function() {
      $(".playback").click(function(e) {
          e.preventDefault();
          var song = $(this).next('audio').get(0);
          if (song.paused)
              song.play();
          else
              song.pause();
      });
  });
  </code></pre>
  
  <p>JavaScript: (ugly concept of mine)</p>
  
  <pre><code>$(function() {
      $(".playback").click(function(e) {
          e.preventDefault();
          var song = $(this).next('audio').get(0);
          if (song.paused)
              song.play();
              song.not($(this).pause();
          else
              song.pause();
      });
  });
  </code></pre>