How to make a regressive timer with html5 + css + javascript, which at the end of the selected time tap (or execute) a * .mp3

Question

How to make a regressive timer with html5 + css + javascript, which at the end of the selected time tap (or execute) a * .mp3

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I started testing with this HTML:

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body onload="principal();">
    <audio id="audio">
            <source src="arquivo1.mp3" type="audio/mp3" />
        </audio>


   <form name="form">
      <input type="text" name="cronometro" id="cron" value="00:00:00" />
      <br />
      <button type="button" onclick="setInterval('tempo()',983);return false;">Cronômetro</button>
      <br />
      <button onclick="clearTimeout(teste)">Zerar</button>
      <br />
        <div class="marginTop col-md-12 text-center center-block">
            <div class="col-md-4 col-md-offset-4">
                <div class="input-group">
                    <span class="input-group-addon">Min</span>
                    <input id="minutos" type="number" min="0" max="59" class="form-control" placeholder="Minutos">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">Seg</span>
                    <input id="segundos" type="number"  min="0" max="59" class="form-control" placeholder="Segundos">
                    <input id="pause" type="hidden" value="0"  class="form-control">      <br />
                </div>
            </div>  
         </div>                 
        <button type="submit" id="marcarTempo">marcar</button> 
        <br />      
        <button type="reset" id="parar" onclick="pause()">Parar</button>      
      <br />
   </form>


<script type="text/javascript" src="script.js"></script>
</body>


</html>'

And this CSS:

*{
        margin:0;
        padding:0;
        }
    body{
        background:#CCC;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        text-align:center;
        }
    #topo{
        background:#069;
        height:100px;
        line-height:100px;
        border-bottom:2px solid #006;
        }
    h2 a{
        color:#069;
        text-decoration:none;
        }
    h2 a:hover{
        color:#006;
        }
    input{
        background:#000;
        width:600px;
        height:200px;
        line-height:200px;
        font-size:150px;
        border:none;
        color:#ffffff;
        border-radius: 25px;
        border: 2px solid #a1a1a1;
        }
    input#minutos.form-control{
        font-size:14px;
        width: 100px;
       height: 50px;
       padding-left: 40px;


    }
    input#segundos.form-control{
       font-size:14px;
       width: 100px;
       height: 50px;    
       padding-left: 40px;


    }       
    div.input-group{
        width: 50px;
        border-bottom-width: 1px;

    }
    div.col-md-4.col-md-offset-4{
        padding-right: 650px;
    }
    div.marginTop.col-md-12.text-center.center-block{
        padding-left: 650px;
    }

JavaScript:

var segundo = 0+"0";
var minuto = 0+"0";
var hora = 0+"0";
var audio = document.getElementById('audio');

function play(){
    audio.play();
}

function tempo(){   
   if (segundo < 59){
      segundo++
      if(segundo < 10){segundo = "0"+segundo}
   }else 
      if(segundo == 59 && minuto < 59){
         segundo = 0+"0";
    minuto++;
    if(minuto < 10){minuto = "0"+minuto}
      }
   if(minuto == 59 && segundo == 59 && hora < 23){
      segundo = 0+"0";
      minuto = 0+"0";
      hora++;
      if(hora < 10){hora = "0"+hora}
   }else 
      if(minuto == 59 && segundo == 59 && hora == 23){
         segundo = 0+"0";
    minuto = 0+"0";
    hora = 0+"0";
      }
   form.cronometro.value = hora +":"+ minuto +":"+ segundo

   if(segundo == 5){
            play();
        }
function pause() {
         audio.pause();
}
}

Thanks in advance!

javascript html html5 css css3

asked by anonymous 22.02.2017 / 00:10

3 answers

Python fill values with data from other rows Authenticate a Json API with PHP

score 2 · Answer 1

To do this, just javascript, in this case, it starts past 3 secs:

const audio = new Audio('http://homes.dcc.ufba.br/~leotavo/index.html/mp3/Coldplay%20-%20Clocks.mp3');
var timer = setTimeout(function() {
  audio.play();
}, 3000);

With pause / play button:

const audio = new Audio('http://homes.dcc.ufba.br/~leotavo/index.html/mp3/Coldplay%20-%20Clocks.mp3');

var timer = setTimeout(function() {
  audio.play();
}, 3000);

const btn_pause = document.getElementById('pause');
const btn_play = document.getElementById('play');

btn_pause.addEventListener('click', function() {
  audio.pause();
});

btn_play.addEventListener('click', function() {
  audio.play();
});

<button id="pause">Pausar</button>
<button id="play">Play</button>

score 1 · Answer 2

The way I got it ...

window.onload = function() {
  var divCronometro = document.getElementById("cronometro");
  var btnIniciar = document.getElementById("iniciar");
  var btnParar = document.getElementById("parar");
  var btnZerar = document.getElementById("zerar");
  var intervaloSegundos = document.getElementById("intervaloAlarme");
  new Cronometro(divCronometro, btnIniciar, btnParar, btnZerar, intervaloAlarmeMinutos, intervaloAlarmeSegundos);
}

var Cronometro = function(div, btnIniciar, btnParar, btnZerar, inputIntervaloMinutos, inputIntervaloSegundos) {
  var este = this;
  this.estado = null;
  this.hora = 0;
  this.minuto = 0;
  this.segundo = 0;
  this.intervaloAlarmeMinutos = 0;
  this.intervaloAlarmeSegundos = 0;
  this.start = false;

  // criando elemento html5 audio
  this.audio = document.createElement('audio');
  this.sourceAudio = document.createElement('source');
  this.sourceAudio.setAttribute('src', 'http://www.online-clockalarm.com/sounds/sound3.mp3');
  this.sourceAudio.setAttribute('type', 'audio/mp3');
  this.audio.appendChild(this.sourceAudio);

  this.atualizar = function() {
    var str = (este.hora < 10 ? "0" +
        este.hora : este.hora) + ":" +
      (este.minuto < 10 ? "0" + este.minuto : este.minuto) + ":" +
      (este.segundo < 10 ? "0" + este.segundo : este.segundo);
    div.innerHTML = str;
  }
  this.iniciar = function() {
    if (!este.start) {
      este.estado = setInterval(function() {
        este.segundo += 1;
        if (este.segundo % 60 == 0) {
          este.segundo = 0;
          este.minuto += 1;
        }
        if (este.minuto % 60 == 0 && este.minuto > 0) {
          este.minuto = 0;
          este.hora += 1;
        }
        este.atualizar();
        este.verificaAlarme();
      }, 1000);
      este.start = true;
    }
  }
  this.parar = function() {
    clearInterval(este.estado);
    este.start = false;
  }
  this.zerar = function() {
    este.hora = 0;
    este.minuto = 0;
    este.segundo = 0;
    este.atualizar();
  }
  this.setIntervaloAlarmeMinutos = function(minutos) {
    este.intervaloAlarmeMinutos = minutos;
  }
  this.setIntervaloAlarmeSegundos = function(segundos) {
    este.intervaloAlarmeSegundos = segundos;
  }
  this.verificaAlarme = function() {
    if (este.intervaloAlarmeMinutos != 0 || este.intervaloAlarmeSegundos != 0) {
      var segundosTotais = este.hora * 3600 + este.minuto * 60 + este.segundo;
      var intervaloAlarmeSegundosTotais = parseInt(este.intervaloAlarmeMinutos * 60) + parseInt(este.intervaloAlarmeSegundos);
      if (segundosTotais % intervaloAlarmeSegundosTotais == 0) {
        este.audio.play();
      };
    }
  }

  // Adicionando listeners
  if (document.addEventListener) {
    inputIntervaloSegundos.addEventListener("change", function() {
      este.setIntervaloAlarmeSegundos(inputIntervaloSegundos.value);
    });
    inputIntervaloMinutos.addEventListener("change", function() {
      este.setIntervaloAlarmeMinutos(inputIntervaloMinutos.value);
    });
    btnIniciar.addEventListener("click", function() {
      este.iniciar();
    });
    btnParar.addEventListener("click", function() {
      este.parar();
    });
    btnZerar.addEventListener("click", function() {
      este.zerar();
    });

  } else {
    inputIntervaloMinutos.addAttachEvent("onChange", function() {
      este.setIntervaloAlarmeMinutos(inputIntervaloMinutos.value);
    });
    inputIntervaloSegundos.addAttachEvent("onChange", function() {
      este.setIntervaloAlarmeSegundos(inputIntervaloSegundos.value);
    });
    btnIniciar.addAttachEvent("onClick", function() {
      este.iniciar();
    });
    btnParar.addAttachEvent("onClick", function() {
      c.parar();
    });
    btnZerar.addAttachEvent("onClick", function() {
      c.zerar();
    });
  }
};

#cronometro {
  font-family: 'Courier New';
  font-weight: bold;
  letter-spacing: -10px;
  font-size: 250px;
  background: red;
  color: white;
  padding: 5px 10px 5px 10px;
  width: 1200px;
  margin: 6cm 4cm 1cm 3cm;
  border-radius: 20px;
  text-align: center;
}

#controles {
  margin: 2cm 4cm 2cm 2cm;
  text-align: center;
  margin: 10px;
  color: white;
  margin-bottom: 160px;
  margin-left: 60px;
  margin-right: 0px;
}

body {
  background: black;
}

div#cronometro {
  width: 1200px;
}

input#intervaloAlarmeMinutos {
  margin-left: 60px;
  margin-right: 0px;
}

<div id="cronometro">00:00:00</div>
<div id="controles">
  <span>Definir intervalo de alarme</span>
  <p>
    <input type="number" id="intervaloAlarmeMinutos" value="0" max="60" min="0" />
    <span>Minutos</span>
    <input type="number" id="intervaloAlarmeSegundos" value="0" max="59" min="0" />
    <span>Segundos</span>
    <p>
      <button id="iniciar">Iniciar</button>
      <button id="parar">Parar</button>
      <button id="zerar">Zerar</button>
</div>

score 0 · Answer 3

Unfortunately, the responses quoting the setTimeout function are not very valid since it will only execute the function if it is free. He will wait at least the stipulated time, but it may take longer. In other words, it will delay execution with ease.

I recommend using the jQuery Plugin The Final Countdown , it is very light and accurate in seconds.

$("#SEUCONTADOR")
  .countdown("2017/01/01", function(event) {
    $(this).text(
      event.strftime('%D days %H:%M:%S')
    );
  }).on("finish.countdown", function(){
   //executa mp3

});