Podés hacer elago asi
Código HTML:
Ver original<!DOCTYPE html>
/*<![CDATA[*/
button{
box-shadow: 1px 1px 0px #383838;
margin: 10px;
}
button:hover{
background: lime;
box-shadow: 1px 1px 0px #000;
}
/*]]>*/
<script type="text/javascript"> //<![CDATA[
var audios = new Array();
function rep(elaudio){
audios=document.getElementsByTagName('audio');
var i;
for (i=0; i<audios.length; i++) {
if (audios[i].id==elaudio){
audios[i].load();
audios[i].play();
}else{
audios[i].pause();
}
}
}
//]]>
<audio preload="auto" id="sonido1"> <source src="musica/you_dont_bring_me_flowers.mp3" type="audio/mp3"/> <source src="musica/you_dont_bring_me_flowers.ogg" type="audio/ogg"/> <audio preload="auto" id="sonido2"> <source src="musica/Across_The_Universe.mp3" type="audio/mp3" /> <source src="musica/Across_The_Universe.ogg" type="audio/ogg" />
y no requiere de jQuery. Aunque yo haría que el evento para reproducir sea onclick, es menos confuso si tenés muchos audios.
En mi ejemplo, las canciones vuelven a empezar desde 0, si querés que continue donde se pausó habría que remover
el_audio.load(); de la script
SAludos