<form name="form" class="clok">
<div>
<span>
<input type="number" size="2" class="form_input" name="hour" id="hour"></span>
<div class="smalltext">Horas</div>
</div>
<hr>
<div>
<span>
<input type="number" size="2" class="form_input" name="minute" id="minute"></span>
<div class="smalltext">Minutos</div>
</div>
<hr>
<div>
<span>
<input type="number" size="2" class="form_input" id="second" name="second"></span>
<div class="smalltext">Sec</div>
</div>
<hr>
</form>
<button onclick="countDown()">empezar</button>
<br>
<audio id="audio" controls> <!-- Puedes ocultarlo con CSS -->
<source type="audio/wav" src="Notificacion.wav">
</audio>
NOTA: Recuerda que debes de tener el archivo de audio en un lugar alcanzable para poner en el src
del source
.
<script>
function countDown() {
var toHour = document.getElementById("hour").value;
var toMinute = document.getElementById("minute").value;
var toSecond = document.getElementById("second").value;
toSecond = toSecond - 1;
if (toSecond < 0) {
toSecond = 59;
toMinute = toMinute - 1;
}
form.second.value = toSecond;
if (toMinute < 0) {
toMinute = 59;
toHour = toHour - 1;
}
form.minute.value = toMinute;
form.hour.value = toHour;
if (toHour < 0) {
//Reproducir audio al final del conteo
var audio = document.getElementById("audio");
audio.play();
//final
form.second.value = 0;
form.minute.value = 0;
form.hour.value = 0;
} else {
setTimeout(countDown, 1000);
}
}
</script>