[Bug] Música toca com botão desligado

Olá, Ygor!

Entendo que você está com um problema na lógica do seu código que faz a música tocar quando a página é atualizada e o input está na posição "ON".

Uma solução possível seria verificar o estado do input sempre que a página é carregada. Para isso, você pode usar o evento DOMContentLoaded do JavaScript. Esse evento é acionado quando todo o conteúdo da página (incluindo scripts, imagens, etc.) é carregado.

Aqui está um exemplo de como você poderia implementar isso:

document.addEventListener('DOMContentLoaded', (event) => {
    if(musicaFocoInput.checked) {
        musica.play();
    } else {
        musica.pause();
    }
});

Nesse exemplo, a função anônima dentro do addEventListener será chamada sempre que a página terminar de carregar. Dentro dessa função, nós verificamos o estado do input musicaFocoInput. Se ele estiver marcado (ou seja, se musicaFocoInput.checked for verdadeiro), a música começa a tocar. Se não estiver marcado, a música é pausada.

Porém, se você deseja que o botão sempre inicie em "OFF" ao recarregar a página, você pode simplesmente adicionar musicaFocoInput.checked = false; dentro do evento DOMContentLoaded. Assim, independentemente do estado anterior do input, ele sempre será desmarcado ao carregar a página.

Espero ter ajudado e bons estudos!

Muito obrigado pela solução!