PENDENCIAS QUE NAO CONSIGO RESOLVER

Boa tarde, consegui identificar um erro na chamada "audioPlay.jogar()" pois jogar não é um método válido para o objeto audio, voce pode alterar para audioPlay.play(), que é o método correto para iniciar a reprodução de um áudio. Não consegui identificar mais falhas, roda o código novamente e vê se pelo menos o áudio toca agora. ╰(°▽°)╯

Bom dia Joao Vitor! Fiz a alteração e não tive resultado.

Muito obrigada

Oi, Jocenice

Use a opção </> para colocar seu código

Veja mais em: Como turbinar seus estudos utilizando o fórum

Bom dia! Vou add github

Obrigada!

https://github.com/joicemonteiros/Fokus-projeto-base

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 startPauseBt = document.querySelector("#start-pause") const musicaFocoInput = document.querySelector("#alternar-musica") const iniciarOuPausarBt = document.querySelector("#start-pause span") const iniciarOuPausarBtIcone = document.querySelector(".app__card-primary-butto-icon") const tempoNaTela = document.querySelector("#timer")

const musica = new Audio("/sons/luna-rise-part-one.mp3") const audioPlay = new Audio("/sons/play.wav"); const audioPausa = new Audio("/sons/pause.mp3"); const audioTempoFinalizado =new Audio("./sons/beep.mp3") const iconePausaEPlay = document.querySelector('.app__card-primary-butto-icon'); let tempoDecorridoEmSegundos = 1500 let intervaloId = null

musica.loop = true;

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

focoBt.addEventListener('click', () => { tempoDecorridoEmSegundos = 1500 alterarContexto('foco') focoBt.classList.add('active') })

curtoBt.addEventListener('click', () => { tempoDecorridoEmSegundos = 300 alterarContexto('descanso-curto') curtoBt.classList.add("active") })

longoBt.addEventListener('click', () => { tempoDecorridoEmSegundos = 900 alterarContexto('descanso-longo') longoBt.classList.add('active') })

function alterarContexto(contexto) { mostrarTempo() 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 uma respirada?<br> <strong class="app__title-strong>Faça uma pausa curta!</strong> break; case "descanso-longo": titulo.innerHTML = Hora de voltar à superficie.<br><strong class="app__title-strong"> Faça uma pausa longa.</strong> default: break; } }

const contagemRegressiva = () => { if(tempoDecorridoEmSegundos <= 0){ // audioTempoFinalizado.play() alert('Tempo finalizado!') zerar() return } tempoDecorridoEmSegundos -= 1 mostrarTempo() }

startPauseBt.addEventListener('click', iniciarOuPausar)

function iniciarOuPausar (){ if(intervaloId){ audioPausa.play() zerar() return } audioPlay.play() intervaloId = setInterval(contagemRegressiva, 1000) iniciarOuPausarBt.textContent = "Pausar" iconePausaEPlay.setAttribute('src', '/imagens/pause.png') iniciarOuPausarBtIcone.setAttribute('src', /image/pause.png) }

function zerar() { clearInterval(intervaloId) iniciarOuPausarBt.textContent = "Começar" iconePausaEPlay.setAttribute('src', '/imagens/play_arrow.png') intervaloId = null } function mostrarTempo(){ const tempo = new Date(tempoDecorridoEmSegundos * 1000) const tempoFormatado = tempo.toLocaleDateString("pt-br", { minute:"2-digit", second: "2-digit"}) tempoNaTela.innerHTML = $(tempoFormatado) }

mostrarTempo() ```

• Corrija as linhas 98 e 115

// Para corrigir
audioPlay.jogar()
tempoNaTela.innerHTML = `$(tempoFormatado)`

• Código corrigido

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 startPauseBt = document.querySelector("#start-pause")
const musicaFocoInput = document.querySelector("#alternar-musica")
const iniciarOuPausarBt = document.querySelector("#start-pause span")
const iniciarOuPausarBtIcone = document.querySelector(".app__card-primary-butto-icon")
const tempoNaTela = document.querySelector("#timer")

const musica = new Audio("/sons/luna-rise-part-one.mp3")
const audioPlay = new Audio("/sons/play.wav");
const audioPausa = new Audio("/sons/pause.mp3");
const audioTempoFinalizado =new Audio("./sons/beep.mp3")
const iconePausaEPlay = document.querySelector('.app__card-primary-butto-icon'); 
let tempoDecorridoEmSegundos = 1500
let intervaloId = null

musica.loop = true;

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

focoBt.addEventListener('click', () => {
    tempoDecorridoEmSegundos = 1500
    alterarContexto('foco')
    focoBt.classList.add('active')
})

curtoBt.addEventListener('click', () => {
    tempoDecorridoEmSegundos = 300
    alterarContexto('descanso-curto')
    curtoBt.classList.add("active")
})

longoBt.addEventListener('click', () => {
    tempoDecorridoEmSegundos = 900
    alterarContexto('descanso-longo')
    longoBt.classList.add('active')
})

function alterarContexto(contexto) {
    mostrarTempo()
    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 uma respirada?<br> <strong class="app__title-strong>Faça uma pausa curta!</strong>
   `
    break;
    case  "descanso-longo":
        titulo.innerHTML =
    `Hora de voltar à superficie.<br><strong class="app__title-strong">
    Faça uma pausa longa.</strong>`
    default:
        break;
    }
}

const contagemRegressiva = () => {
    if(tempoDecorridoEmSegundos <= 0){ 
        // audioTempoFinalizado.play()
        alert('Tempo finalizado!')
        zerar() 
        return
    }
    tempoDecorridoEmSegundos -= 1
    mostrarTempo()
}

startPauseBt.addEventListener('click', iniciarOuPausar)

function iniciarOuPausar (){
    if(intervaloId){
        audioPausa.play()
        zerar()
        return
    }
    audioPlay.play(); // Corrigido
    intervaloId = setInterval(contagemRegressiva, 1000)
    iniciarOuPausarBt.textContent = "Pausar"
    iconePausaEPlay.setAttribute('src', '/imagens/pause.png')
    iniciarOuPausarBtIcone.setAttribute('src', `/image/pause.png`)
}

function zerar() {
    clearInterval(intervaloId)
    iniciarOuPausarBt.textContent = "Começar"
    iconePausaEPlay.setAttribute('src', '/imagens/play_arrow.png')
    intervaloId = null
}
function mostrarTempo(){
    const tempo = new Date(tempoDecorridoEmSegundos * 1000)
    const tempoFormatado = tempo.toLocaleDateString("pt-br", {
        minute:"2-digit", second: "2-digit"})
    tempoNaTela.innerHTML = `${tempoFormatado}`;  //Corrigido
}

mostrarTempo()

Minha projeto está assim...

*Não consigo mudar as fotos. *O botão da música não toca. *E tem essa frase no cronometro: $(tempoFormatado).

Desculpa o incomodo, mas preciso concluir e deixar o projeto bonito.

Muito obrigada mesmo

• Mudar as fotos. Está Ok

• O botão da música. Está OK.

• Frase no cronometro

function mostrarTempo() {
  const tempo = new Date(tempoDecorridoEmSegundos * 1000)
  const tempoFormatado = tempo.toLocaleTimeString("pt-BR", { minute: "2-digit", second: "2-digit" });
  tempoNaTela.innerHTML = tempoFormatado
}

Atualize seu código no GitHut

Obrigada!!!

Código atualizado!