tag <audio>: ao clicar em um segundo audio, parar execuçao do primeiro

Use uma variável global para identificar o audio em execução.

Toda vez que um novo audio é tocado pegue a informação da var global e dar pause no que estiver tocando e play na atual.

Vejamos um exemplo:

Spoiler

<button class="tocar_audio" data-alvo="exemplo_a">Tocar Audio A</button>
<button class="tocar_audio" data-alvo="exemplo_b">Tocar Audio B</button>

<audio id="exemplo_a">
 <source src="audio_a.mp3" type="audio/mpeg">
</audio>

<audio id="exemplo_b">
 <source src="audio_b.mp3" type="audio/mpeg">
</audio>

<script>
 var variavelGlobal = null;

 document.querySelectorAll('.tocar_audio').forEach(function (e) {
 e.addEventListener('click', tocarAudio, false);
 });

 function tocarAudio(e) {
 var alvo = (e.target).dataset.alvo;
 if (variavelGlobal) {
 document.getElementById(variavelGlobal).pause();
 }
 document.getElementById(alvo).play();
 variavelGlobal = alvo;
 }
</script>

  

	 

	Fica meio esquisito pois se a pessoa clicar novamente no audio anterior ela vai continuar ouvindo de onde parou pois o HTML5 não tem recurso para parar uma mídia.

	Porém isso é possível fazer criando a tag <audio> dinamicamente, e quando tocar outro áudio é só apagar o html a tag anterior assim você "mata" a execução substituindo por outro.

Somente complementando @Omar~ na verdade tem uma forma de resetar o audio mantendo os elementos usando a propriedade currentTime = 0

no caso seria apenas uma linha adicionada ao seu método.

function tocarAudio(e) {
 var alvo = (e.target).dataset.alvo;
 if (variavelGlobal) {
 document.getElementById(variavelGlobal).pause();
 document.getElementById(variavelGlobal).currentTime = 0;
 }
 document.getElementById(alvo).play();
 variavelGlobal = alvo;
}

	link JsBin:[https://jsbin.com/liyerayewi/edit?html,js,output](https://jsbin.com/liyerayewi/edit?html,js,output)