Resolução para o exercicio - Inserindo audio no projeto

Foram criadas instancias de áudio para armazenar os sons

• const beep = new Audio('/sons/beep.mp3'); // audio para quando terminar o tempo
• const playMus = new Audio('/sons/play.wav'); // audio para o play
• const pauseMus = new Audio('/sons/pause.mp3'); // audio para o pause

O beep é chamado ao final da contagem regressiva, o play é chamado quando apertar o botão de começar e o pause, no momento que a musica é pausada.

const html = document.querySelector('html');
const image = document.querySelector('.app__image');
const title = document.querySelector('.app__title');
const btnList = document.querySelectorAll('.app__card-button');
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 inputMusica = document.querySelector('#alternar-musica');
const musica = new Audio('/sons/luna-rise-part-one.mp3');
const beep = new Audio('/sons/beep.mp3'); // audio para quando terminar o tempo
const playMus = new Audio('/sons/play.wav'); // audio para o play
const pauseMus = new Audio('/sons/pause.mp3'); // audio para o pause
const startPauseBt = document.querySelector('#start-pause');
let tempoEmSegundos = 15;
let intervaloId = null;

// ----------------------------------------------------------------------------------

const contagemRegresiva = () => {
    if (tempoEmSegundos <= 0) {  
        beep.play(); // o audio 
        zerar(); 
        return;
    }
    tempoEmSegundos -= 1;
}

// ----------------------------------------------------------------------------------

musica.loop = true;

// ----------------------------------------------------------------------------------
function mudaTextos(param, param2) {
    title.innerHTML = `${param},<br>
    <strong class="app__title-strong">${param2}</strong>`;
}

function alternarContexto(param) {
    html.setAttribute('data-contexto', param)
    image.setAttribute('src',`/imagens/${param}.png`);

    switch (param) {
        case 'foco':
            mudaTextos('Otimize sua produtividade','mergulhe no que importa');
            break;
        case 'descanso-curto':
            mudaTextos('Que tal dar uma respirada?','Faça uma pausa curta!');
            break;
        default:
            mudaTextos('Hora de voltar à superfície.','Faça uma pausa longa.')
    }
}

function estadosDoBotao(param) {
    for (i = 0; i < btnList.length; i ++) {
        if(btnList[i].classList.contains('active')) btnList[i].classList.remove('active');
    }

    document.querySelector(`.app__card-button--${param}`).classList.add('active');
}

function iniciarOuPausar() {
    if (intervaloId) {
        startPauseBt.innerHTML = `<img class="app__card-primary-butto-icon" src="/imagens/play_arrow.png" alt="">
        <span>Começar</span>`;
        pauseMus.play(); // Audio é tocado ao pausar
        zerar();
        return;
    }
    
    startPauseBt.innerHTML = `<img class="app__card-primary-butto-icon" src="/imagens/pause.png" alt="">
    <span>Pausar</span>`;
    intervaloId = setInterval(contagemRegresiva, 1000);
    playMus.play(); // Audio é tocado ao iniciar
}

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

// ----------------------------------------------------------------------------------

focoBt.addEventListener('click', () => {
    estadosDoBotao('foco');
    alternarContexto('foco');
})

curtoBt.addEventListener('click', () => {
    alternarContexto('descanso-curto');
    estadosDoBotao('curto');
})

longoBt.addEventListener('click', () => {
    alternarContexto('descanso-longo');
    estadosDoBotao('longo');
})

inputMusica.addEventListener('change', () => {
    musica.paused === true ? musica.play() : musica.pause();
})

startPauseBt.addEventListener('click', iniciarOuPausar)