Desafio: Inserindo áudios no projeto

Construção até o momento

const duracao               = 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');

let tempoDecorridoEmSegundos = 5;
let intervaloId             = null;



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


function alteraContexto(contexto){
    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){
    btn_acao.addEventListener('click', () => { 
        alteraContexto(contexto);
        btn_acao.classList.add('active');
    })
}

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

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

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

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

startPauseBt.addEventListener('click', iniciarOuPausar);