Desafio: inserindo áudios no projeto.

Fiz o desafio dessa forma, testei de outras formas mas achei essa bacana. Nao consegui acessar o filho do botao para mudar apenas o texto, quando da o play o arrow some.

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 startPauseBtn = document.querySelector('#start-pause');
const musicaFocoInput = document.querySelector('#alternar-musica')
const musicaTemporizadorPlay = new Audio('/sons/play.wav')
const musicaTemporizadorPause = new Audio('/sons/pause.mp3')
const audioTempoFinalizado = new Audio('./sons/beep.mp3')
const musicaFoco = new Audio('/sons/luna-rise-part-one.mp3')   //New audio e uma instancia do javaScript
musicaFoco.loop = true; //para musica ficar em loop
//readFile() serve pra pegar qualquer arquivo para colocar no projeto mas nao e recomendavel

let tempoDecorridosEmSegundos = 5;
let intervaloId = null;

musicaFocoInput.addEventListener('change', () => {
    if (musicaFoco.paused) {
        musicaFoco.play()
    } else {
        musicaFoco.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? <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;
    }
}

const contagemRegressiva = () => {
    if (tempoDecorridosEmSegundos <= 0 ) {
        audioTempoFinalizado.play()
        zerar();
        return
    }
    tempoDecorridosEmSegundos -= 1; //decrementar um valor usamos o -=
    console.log(tempoDecorridosEmSegundos);
}

startPauseBtn.addEventListener('click', iniciar);


function iniciar() {
    if (intervaloId) {
        zerar()
        return
    }
    intervaloId = setInterval(contagemRegressiva, 1000); //setInterval e um metodo que realiza a funcao em um determinado peridodo de tempo, ele recebe dois parametros 
    musicaTemporizadorPlay.play()
    startPauseBtn.innerText = 'Pausa';
}

function zerar() {
    clearInterval(intervaloId); //clearInterval pausa algum tipo de lop que esta decorrendo no codigo
    intervaloId = null; //e devolvendo o que a variavel estava recebendo
    musicaTemporizadorPause.play()
    startPauseBtn.innerText = 'Comecar';
}