[Dúvida] Faça como eu fiz - Manipulação de Elementos

Vou compartilhar meu código, e o que eu posso melhorar nele o loop forEach não conseguir implementar.

const html = document.querySelector('html'); //seleciona o html
const focoBt = document.querySelector('.app__card-button--foco');//seleciona o botão foco
const curtoBt = document.querySelector('.app__card-button--curto');//seleciona o botrão curto
const longoBt = document.querySelector('.app__card-button--longo');//seleciona o botão descanso longo
const banner = document.querySelector('.app__image'); //seleciona as imagnes que tenho que trocar ao clicar nos botões
const titulo = document.querySelector('.app__title');
const botoes =document.querySelectorAll('.app__card-button');
const musicaFocoInput = document.querySelector('#alternar-musica');
const musica = new Audio('/sons/luna-rise-part-one.mp3');
musica.loop = true;

musicaFocoInput.addEventListener('change', () => {
    if(musica.paused) {
        musica.play()
    } else {
        musica.pause()
    }
})

focoBt.addEventListener('click', () =>{
    /*html.setAttribute('data-contexto', 'foco');
    banner.setAttribute('src', '/imagens/foco.png'); // muda o atributo da imagem ao clicar*/
    alterarContexto('foco');
    focoBt.classList.add('active');
})//mudando atributo das páginas ao clicar no botão

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 à superfície.
             <strong class="app__title-strong"> Faça uma pausa longa</strong>
            `
            break;
        default:
            break;
    }
}