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

[Luis Fernando R. Valle 0]

Estou desenvolvendo um site de vinhetas, mas estou com o seguinte problema. Quando o cliente clica em um áudio ele toca normalmente, mas quando clica em um segundo com o primeiro ainda em execução, ficam os dois áudios executando ao mesmo tempo no sit.

Gostaria que um executasse por vez.

 

Lembrando que os áudios estão inseridos separadamente.

[Omar~ 87]

 

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.

[wanderval 19]

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