[Dúvida] Desafio do Áudio

Estou com uma questão, adicionei os áudios de uma maneira diferente do professor e tive problema com o de pause. Quando se clica para dar pause, as vezes ele funciona e as vezes não. Alguém para tirar minha dúvida? Meu código está assim =

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 inicioContador = new Audio ('./sons/play.wav'); const pauseContador = new Audio ('./sons/pause.mp3')

startPauseBt.addEventListener ('click', () => { if (inicioContador.paused) { inicioContador.play() } else { pauseContador.play(); inicioContador.pause(); } if (startPauseBt.innerText === 'Começar') { startPauseBt.innerText = 'Pausar' } else { startPauseBt.innerText = 'Começar' } });

const musicaFocoInput = document.querySelector ('#alternar-musica'); const musica = new Audio('./sons/luna-rise-part-one.mp3');

let tempoDecorridoEmSegundos = 5; let intervaloId = null;

musica.loop = true;

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

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

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

longoBt.addEventListener ('click', () => { alterarContexto ('descanso-longo') 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) 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?<br>
        <strong class="app__title-strong">Faça uma pausa curta!</strong>`

        break;

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

    default:
        break;
}

};

const fimDoContador = new Audio ('./sons/beep.mp3') const contagemRegressiva = () => { if (tempoDecorridoEmSegundos <= 0) { fimDoContador.play () zerar() return } tempoDecorridoEmSegundos -= 1 };

startPauseBt.addEventListener ('click', iniciarOuPausar)

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

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

startPauseBt.addEventListener('click', () => { // Toggle entre começar e pausar if (startPauseBt.innerText === 'Começar') { if (inicioContador.paused) { inicioContador.play(); } startPauseBt.innerText = 'Pausar'; // Inicia a música de fundo se estiver pausada if (musica.paused) { musica.play(); } // Continuar o contador iniciarOuPausar(); } else { // Toca o som de pause somente se estava tocando o som de iniciar if (!inicioContador.paused) { pauseContador.play(); inicioContador.pause(); // Certifique-se de pausar o som de iniciar } startPauseBt.innerText = 'Começar'; // Pausa a música de fundo if (!musica.paused) { musica.pause(); } // Pausa o contador iniciarOuPausar(); } });

Problema Potencial com o Áudio de Pausa

Melhorando a Lógica de Reprodução/Pausa

Exemplo de Código Refinado

Observações Adicionais