Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafio: Incorporando Audio al Proyecto

/* Creamos las Instancia del Objeto Audio */  
const audioPlay = new Audio('./sonidos/play.wav');
const audioPause = new Audio('./sonidos/pause.mp3');
const audioTiempoFinalizado = new Audio('./sonidos/beep.mp3');
const cuentaRegresiva = () => {
    if (tiempoTranscurridoEnSegundos <= 0) {
        audioTiempoFinalizado.play();
        alert('Tiempo Finalizado');
        reiniciar();
        return;
    }
    textoIniciarPausar.textContent = "Pausar";
    tiempoTranscurridoEnSegundos -= 1;  
    console.log("Temporizador: " + tiempoTranscurridoEnSegundos);  /* Muestra el tiempo actual */
}

/* Codigo para manejo del Temporizador */

botonIniciarPausar.addEventListener('click', iniciarPausar);

function iniciarPausar() {
    /* Con la condición if(idIntervalo) podre pausar y comenzar el Temporizador, evaluando si es null o tiene un valor */
    if (idIntervalo) {
        audioPause.play();
        reiniciar(); /* Nos permitira pausar y reanudar el temporizador con un solo boton */
        return;
    }
    /* setInterval: es un metodo de JS utilizado para establecer el intervalo en que determinada cosa va a ocurrir */ 
    /* en este caso queremos el intervalo en que va a pasar nuestra cuenta regresiva */ 
    audioPlay.play();
    idIntervalo = setInterval(cuentaRegresiva, 1000);
}

function reiniciar() {
    /* La funcion reiniciar() nos permitira pausar y reanudar el temporizador con el mismo boton */
    /* clearInterval: interrumpe el flujo del setInverval y detiene el Temporizador */
    clearInterval(idIntervalo);
    idIntervalo = null;
    textoIniciarPausar.textContent = "Comenzar";
}
1 respuesta

Hola Rafael! ¿Cómo estás?

Gracias por compartir tu código con nosotros. Sigue así y no dudes en volver al foro si tienes alguna pregunta o dificultad.

¡Gracias nuevamente! Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!