Desafio: Inserindo áudios no projeto | JavaScript: manipulando elementos no DOM

**JavaScript: **

Algo errado na funcionalidade deste código, apesar de executar os áudios, no momento de zerar, iniciar e pausar. Porém parece ter um loop, após a contagem ser finalizada. Preciso de ajudar para entender o erro de funcionalidade.

const html = document.querySelector('html'); const focoBt = document.querySelector('.app__card-button--foco'); const curtoBt = document.querySelector('.app__card-button--curto'); const longoBt = document.querySelector('.app__card-button--longo'); const banner = document.querySelector('.app__image'); const titulo = document.querySelector('.app__title'); const botoes = document.querySelectorAll('.app__card-button'); const startPauseBt = document.querySelector('#start-pause'); const musicaFocoInput = document.querySelector('#alternar-musica'); const musica = new Audio('./sons/luna-rise-part-one.mp3'); const audioPlay = new Audio('./sons/play.wav'); const audioPausa = new Audio('./sons/pause.mp3'); const audioTempoFinalizado = new Audio('./sons/beep.mp3'); let tempoDecorridoEmSegundos = 5 let intervaloId = null

musica.loop = true;

// const botaoIniciar = document.querySelector('.app__card-primary-button'); // const displayTempo = document.querySelector('#timer'); // const duracaoFoco = 1500; // const duracaoDescansoCurto = 300; // const duracaoDescansoLongo = 900;

musicaFocoInput.addEventListener('change', () => { if (musica.paused) { musica.play() } else { musica.pause() }

});

focoBt.addEventListener('click', () => { alterarContexto('foco', 'foco.png'); focoBt.classList.add('active'); });

curtoBt.addEventListener('click', () => { alterarContexto('descanso-curto', 'descanso-curto.png'); curtoBt.classList.add('active'); });

longoBt.addEventListener('click', () => { alterarContexto('descanso-longo', 'descanso-longo.png'); longoBt.classList.add('active'); });

function alterarContexto(contexto) { botoes.forEach(function (contexto) { contexto.classList.remove('active'); });

html.setAttribute('data-contexto', contexto);
banner.setAttribute('src', `./imagens/${contexto}.png`);
// banner.setAttribute('src', './imagens/${contexto}.png');
    switch (contexto) {
        case "foco":
            titulo.innerHTML = `
            Otimize sua produtividade,<br>
            <strong class="app__title-strong">mergulhe no que importa.</strong>
            ` 
            
            break;
        case "descanso-curto":
            titulo.innerHTML = `
            Que tal dar uma respirada? <strong class="app__title-strong">Faça uma pausa curta!</strong>
            `

            break;
        case "descanso-longo":
            titulo.innerHTML = `
            Hora de voltar à superfície. <strong class="app__title-strong">Faça uma pausa longa.</strong>
            `

        default:
            break;
}

}

const contagemRegressiva = () => { if(tempoDecorridoEmSegundos <= 0) { audioTempoFinalizado.play() alert('Tempo finalizado') zerar() return } tempoDecorridoEmSegundos -= 1 console.log('tempo: ' + tempoDecorridoEmSegundos); console.log('id:' + intervaloId) }

startPauseBt.addEventListener('click', iniciarOuPausar);

function iniciarOuPausar() { if(intervaloId){ audioPausa.play(); zerar() return } audioPlay.play(); intervaloId = setInterval(contagemRegressiva, 1000); }

function zerar() { clearInterval(intervaloId) intervaloId = null }

Oi Ana,

Percebi que você está enfrentando um loop após a contagem regressiva terminar, e isso acontece porque a função contagemRegressiva está sendo executada repetidamente pelo setInterval, mesmo quando o tempo chega a zero. 😳

O problema está na lógica da sua função contagemRegressiva. Mesmo quando tempoDecorridoEmSegundos chega a 0, você chama zerar() e retorna da função, mas o setInterval continua ativo. Para corrigir isso, você precisa limpar o intervalo antes de chamar zerar() quando o tempo acabar.

Aqui está a correção:

const contagemRegressiva = () => {
  if (tempoDecorridoEmSegundos <= 0) {
    audioTempoFinalizado.play();
    alert('Tempo finalizado');
    zerar();
    return;
  }
  tempoDecorridoEmSegundos -= 1;
  console.log('tempo: ' + tempoDecorridoEmSegundos);
  console.log('id:' + intervaloId);
};

function zerar() {
  clearInterval(intervaloId);
  intervaloId = null;
}

Com essa alteração, o setInterval será limpo corretamente quando o tempo acabar, evitando o loop. 👍

Para saber mais:

Continue praticando e explorando o mundo do JavaScript! 💪