1
resposta

A música não pausa

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;
}
1 resposta

Olá, Erik.

Tudo bem?

Acredito que o problema esteja na função getMusic(). Nela, você está criando uma nova instância do objeto Audio toda vez que a função é chamada. Isso significa que, cada vez que você chama playMusic(), um novo objeto Audio é criado e começa a tocar a música do início. Quando você tenta pausar a música, você está na verdade pausando uma nova instância do objeto Audio, não a que está tocando a música.

Uma possível solução seria criar uma única instância do objeto Audio fora da função getMusic(), e então retornar essa instância na função. Aqui está um exemplo de como você poderia fazer isso:

let music = new Audio("/sons/luna-rise-part-one.mp3");

function getMusic() {
  return music;
}

Dessa forma, a mesma instância do objeto Audio será usada toda vez que você chamar playMusic(), permitindo que você pause e reproduza a mesma música.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.