Lista de exercício: código completo

const duracaoFoco           = 1500;
const duracaoDescansoCurto  = 300;
const duracaoDescansoLongo  = 900;
const iniciarBt             = document.querySelector('.app__card-primary-button');
const displayTempo          = document.querySelector('#timer'); 
const titulo                = document.querySelector('.app__title');
const html                  = document.querySelector('html');
const banner                = document.querySelector('.app__image');
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 musicaBtn             = document.querySelector('#alternar-musica');
const musica                = new Audio('sons/luna-rise-part-one.mp3');
const somBeep               = new Audio('sons/beep.mp3');
const somPause              = new Audio('sons/pause.mp3');
const somPlay               = new Audio('sons/play.wav');
const botoes                = document.querySelectorAll('.app__card-button');
const startPauseBt          = document.querySelector('#start-pause');
const iniciarOuPausarBt     = document.querySelector('#start-pause span');
const inconeIniciarPausar   = document.querySelector('.app__card-primary-butto-icon');
const inconeComecar         = 'imagens/play_arrow.png';
const inconePausar          = 'imagens/pause.png';
const tempoNaTela           = document.querySelector('#timer');



let tempoDecorridoEmSegundos = duracaoFoco;
let intervaloId              = null;



musicaBtn.addEventListener('change', () => {
    console.log('passei por aqui');
    if (musica.paused){
        musica.play();
    } else {
        musica.pause();
    }
});


function alteraContexto(contexto){
    mostrarTempo();
    botoes.forEach(function(lista){
        lista.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? 
                                <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>`
            break;
        default:
            break;
    }
}

musica.loop = true;
function btn(btn_acao,contexto,duracao){
    btn_acao.addEventListener('click', () => { 
        tempoDecorridoEmSegundos = duracao;
        alteraContexto(contexto);
        btn_acao.classList.add('active');
    })
}

btn(focoBt,'foco',duracaoFoco);
btn(curtoBt,'descanso-curto',duracaoDescansoCurto);
btn(longoBt,'descanso-longo',duracaoDescansoLongo);

const contagemRegressiva = () => {
    if (tempoDecorridoEmSegundos <= 0) {
        somBeep.play();
        alert('Tempo finalizado');
        zerar();
        return;
    }
    tempoDecorridoEmSegundos -= 1;
    //console.log('Temporizador: ' + tempoDecorridoEmSegundos);
    mostrarTempo();
}

function iniciarOuPausar() {
    if (intervaloId) {
        zerar();
        somPause.play();
        return;
    }
    somPlay.play();
    intervaloId = setInterval(contagemRegressiva, 1000);
    iniciarOuPausarBt.textContent = 'Pausar';
    inconeIniciarPausar.setAttribute('src',inconePausar);
}

function zerar() {
    clearInterval(intervaloId);
    intervaloId = null;
    iniciarOuPausarBt.textContent = 'Começar';
    inconeIniciarPausar.setAttribute('src',inconeComecar);
}

function mostrarTempo(){
    const tempo = new Date(tempoDecorridoEmSegundos * 1000);
    const tempoFormatado = tempo.toLocaleTimeString('pt-Br', {minute: '2-digit', second: '2-digit'});
    tempoNaTela.innerHTML = `${tempoFormatado}`;
}

startPauseBt.addEventListener('click', iniciarOuPausar);
mostrarTempo();