Reproducir y pausar un elemento de audio HTML5 a la vez a través de jQuery

Question

Tengo varios elementos de audio HTML5 en una página y estoy usando jQuery para reproducirlos y pausarlos. Las funciones de reproducción y pausa funcionan correctamente, pero las pistas se pueden reproducir todas al mismo tiempo.

¿Cómo puedo volver a escribir este código para que solo se pueda reproducir una canción a la vez? Es decir ... si uno está jugando y haces clic en otro, pausar el anterior y reproducir el clic más reciente.

¡Gracias!

HTML:

<div id="music_right"> 
     <div class="thumbnail" id="paparazzi"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
      </a> 
      <audio> 
      <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
     <div class="thumbnail" id="danceinthedark"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
      </a> 
      <audio> 
      <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
     <div class="thumbnail" id="bornthisway"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
      </a> 
      <audio> 
      <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
    </div> 

JavaScript: (que funciona, pero juega/pausa individual)

$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio').get(0); 
     if (song.paused) 
      song.play(); 
     else 
      song.pause(); 
    }); 
}); 

JavaScript: (fea concepto de la mina)

$(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(); 
    }); 
}); 

Answer 1

var curPlaying; 

$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio')[0]; 
     if(curPlaying) { $("audio", "#"+curPlaying)[0].pause(); } 
     if(song.paused) { song.play(); } else { song.pause(); } 
     curPlaying = $(this).parent()[0].id; 
    }); 
}); 

Eso debería funcionar.

EDIT:

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; 
    }); 
}); 

Answer 2

Esta pequeña función funciona para mí. Detiene todos los demás elementos de audio que se reproducen en la página y permite que el que se ha iniciado continúe reproduciéndose. Here es un violín.

$("audio").on("play", function (me) { 
     jQuery('audio').each(function (i,e) { 
       if (e != me.currentTarget) 
       { 
        this.pause(); 
       } 
     }); 
});