Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Após clicar novamente no botão o áudio não reinicia e continua de onde parou

Quando clico no botão começa sair o áudio, se clicar em outro, interrompe o áudio anterior mas se retorno nos botões já clicados não reinicia o áudio, como corrigir esse erro por favor ?

No js foi acrescentado apenas o comando para interromper o som, quando outro botão é selecionado:

let audioAtual = null;
function tocaSom (seletorAudio) {
    const elemento = document.querySelector(seletorAudio);
    if (elemento != null && elemento.localName === 'audio') {
        if (audioAtual != null) { // se houver um áudio sendo reproduzido atualmente, pausa a reprodução antes de tocar o novo áudio
            audioAtual.pause();
        }
        elemento.play();
        audioAtual = elemento; // atribui o novo elemento de áudio à variável global

        
     } else {
         console.log('Elemento não encontrado ou seletor inválido');
     }
     
}

const listaDeTeclas = document.querySelectorAll('.tecla');


for (let contador = 0; contador < listaDeTeclas.length; contador++) {

    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`; 

    tecla.onclick = function () {
        tocaSom(idAudio);
    }

    tecla.onkeydown = function (evento) {

        if (evento.code === 'Space' || evento.code === 'Enter') {
            tecla.classList.add('ativa');
        }

    }

    tecla.onkeyup = function () {
        tecla.classList.remove('ativa');
    }

}
2 respostas
solução!

Olá!

Isso está acontecendo porque o método .pause() apenas pausa a reprodução do áudio, mas não redefine o tempo de reprodução para o início.

Para resolver esse problema, você pode adicionar uma linha de código para definir o tempo atual do áudio para 0 antes de pausá-lo. Dessa forma, sempre que você clicar novamente no botão, o áudio começará do início. Veja como você pode fazer isso:

let audioAtual = null;
function tocaSom (seletorAudio) {
    const elemento = document.querySelector(seletorAudio);
    if (elemento != null && elemento.localName === 'audio') {
        if (audioAtual != null) { // se houver um áudio sendo reproduzido atualmente, pausa a reprodução antes de tocar o novo áudio
          audioAtual.currentTime = 0 // adicione essa linha;
            audioAtual.pause();
        }
        elemento.play();
        audioAtual = elemento; // atribui o novo elemento de áudio à variável global

        
     } else {
         console.log('Elemento não encontrado ou seletor inválido');
     }
     
}

const listaDeTeclas = document.querySelectorAll('.tecla');


for (let contador = 0; contador < listaDeTeclas.length; contador++) {

    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`; 

    tecla.onclick = function () {
        tocaSom(idAudio);
    }

    tecla.onkeydown = function (evento) {

        if (evento.code === 'Space' || evento.code === 'Enter') {
            tecla.classList.add('ativa');
        }

    }

    tecla.onkeyup = function () {
        tecla.classList.remove('ativa');
    }

}

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Obrigado Vitor.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software