Por algum motivo ele não pausa de jeito nenhum, já tentei de diversas formas.
getElement("#alternar-musica").checked = false;
getElement("#alternar-musica").addEventListener("change", () => {
playMusic();
});
Object.keys(oButtons()).forEach((key) => {
oButtons()[key].addEventListener("click", () => {
themeFor(key);
setButtonTheme(key);
});
});
function getElement(element) {
return document.querySelector(element);
}
function oButtons() {
return {
foco: oFocusButton("foco"),
curto: oFocusButton("short"),
longo: oFocusButton("long"),
};
}
function oFocusButton(sType) {
return Array.from(document.querySelectorAll("button[data-contexto]")).find(
(item) => item.getAttribute("data-contexto") === sType
);
}
function oTitleTheme() {
return {
foco: `Otimize sua produtividade, <br>
<strong class="app__title-strong">mergulhe no que importa.</strong>`,
curto: `Qual tal dar uma respirada? <strong class="app__title-strong"> Faça uma pausa curta!</strong>`,
longo: `Hora de voltar à superfície. <strong class="app__title-strong">Faça uma pausa longa.</strong>`,
};
}
function setImageTheme(context) {
getElement("html").setAttribute("data-contexto", `${context}`);
getElement(".app__image").setAttribute("src", `/imagens/${context}.png`);
}
function setTitleTheme(context) {
getElement(".app__title").innerHTML = oTitleTheme()[context];
}
function setButtonTheme(key) {
setOffActiveButtonTheme(key);
oButtons()[key].classList.toggle("active");
}
function setOffActiveButtonTheme() {
Object.keys(oButtons()).forEach((key) => {
oButtons()[key].classList.remove("active");
});
}
function themeFor(key) {
switch (key) {
case "foco":
setImageTheme(key);
setTitleTheme(key);
break;
default:
setImageTheme(`descanso-${key}`);
setTitleTheme(key);
break;
}
}
function playMusic() {
if (bSwitchHasActive()) {
getMusic().play();
} else {
getMusic().pause();
}
}
function getMusic() {
return new Audio("/sons/luna-rise-part-one.mp3");
}
function bSwitchHasActive() {
return getElement("#alternar-musica").checked;
}