Resolução

Olá. Consegui resolver o desafio com bastante dificuldade, mas bora evoluir.

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 startBotao = document.querySelector('#start-pause');
const musicaFocoInput = document.querySelector ('#alternar-musica');
const somPlay = new Audio('/sons/play.wav'); 
const somPause = new Audio('/sons/pause.mp3'); 
const somZero = new Audio('/sons/beep.mp3');
const musica = new Audio('/sons/luna-rise-part-one.mp3');

let tempoDecorridoEmSegundos = 5
let intervaloId = null

somPlay.pause = true
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 a superfície<br>
            <strong class="app__title-strong">Faça uma pausa longa</strong>`
            break;

        default:    
            break;
    }
}

const contagemRegrassiva = () => {
    if (tempoDecorridoEmSegundos <= 0) {
        somZero.play();
        zerar();
        alert('Tempo finalizado')
        tempoDecorridoEmSegundos = 5;
        return
    }
    tempoDecorridoEmSegundos -= 1
    console.log('temporizador: ' + tempoDecorridoEmSegundos)
}

startBotao.addEventListener('click', iniciar);


function iniciar () {
    if (intervaloId){
        somPause.play();
        zerar();
        return
    }
    somPlay.play();
    intervaloId = setInterval(contagemRegrassiva, 1000);
}

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