Quiero reproducir un sonido después de que termine mi aplicación primitiva de pomodo. Encontré una función que reproduce un sonido, agregué un detector de eventos al botón y funciona. Sin embargo, cuando trato de aplicarlo a mi función, no es así. Solo soy un principiante, así que probablemente esté arruinando algo aquí.
<div id="display-timer"> <p id="w-minutes">1</p> <p id="colon">:</p> <p id="w-seconds">00</p> </div> const displayTimer = document.querySelector("#display-timer"); const start = document.querySelector("#start-btn"); function timer() { if (ws.innerText != 0) { ws.innerText--; } else if (wm.innerText != 0 && ws.innerText == 0) { ws.innerText = 59; wm.innerText--; } } function play() { var audio = new Audio("rooster.wav"); audio.play(); } if (wm.innerText == 0 && ws.innerText == 0) { play(); }su código js se ejecutará de arriba a abajo, por lo que
if (wm.innerText == 0 && ws.innerText == 0) play();se ejecutará antes de que los minutos y segundos lleguen a 0
como dice Johnny Mopp, use setInterval para ejecutar una función cada segundo y también verifique su condición
ejemplo (no probado):
function timer() { if (ws.innerText != 0) { ws.innerText--; } else if (wm.innerText != 0 && ws.innerText == 0) { ws.innerText = 59; wm.innerText--; } if (wm.innerText == 0 && ws.innerText == 0) play(); } function play() { var audio = new Audio("rooster.wav"); audio.play(); } window.setTimeout('timer', 1000);Esto debería funcionar. Debe establecer un intervalo para hacer eso. Además, debe definir ws y wm si no los define en su propio código.
const wm = document.querySelector('#w-minutes') const ws = document.querySelector('#w-seconds') const displayTimer = document.querySelector("#display-timer"); const start = document.querySelector("#start-btn"); let interval; interval = setInterval(function(){ if(wm.textContent == 0 && ws.textContent == 0){ play() window.clearInterval(interval) }else if(ws.textContent == 0){ wm.textContent = parseFloat(wm.textContent)-1; ws.textContent = 59 } else{ ws.textContent = parseFloat(ws.textContent)-1 } },1000) function play() { var audio = new Audio("rooster.wav"); audio.play(); } <div id="display-timer"> <p id="w-minutes">1</p> <p id="colon">:</p> <p id="w-seconds">00</p> </div>A su función de temporizador le falta un control para la función de reproducción de sonido.
No está claro cómo se llama a su función de temporizador. Intente establecer un intervalo por cada segundo para bajar el contador usando setInterval, y guarde el valor para borrar el intervalo cuando el contador llegue a 0. Luego, cada segundo, verifique si este es el momento para reproducir el sonido (si el contador llegó a cero) .
let savedTimer; function play() { var audio = new Audio('rooster.wav'); audio.play(); } function checkIfShouldPlay() { if (wm.innerText == 0 && ws.innerText == 0) { play(); clearInterval(savedTimer); } } function timer() { if (ws.innerText != 0) { ws.innerText--; } else if (wm.innerText != 0 && ws.innerText == 0) { ws.innerText = 59; wm.innerText--; } checkIfShouldPlay(); } savedTimer = setInterval(() => timer(), 1000);Sin embargo, creo que sería mejor guardar el temporizador en variables normales para ejecutar la cuenta regresiva y luego reflejar el valor en html, en lugar de ejecutar el contador en la propiedad innerText de los elementos html.