This tutorial will help you, how to create Countdown Timer using Javascript and HTML and play sound after times up.My primary caution for you is to understand JavaScript handled on the client side and has a dependency on the user’s computer speed. However, countdown timers are still effective for encourgaging your users to quickly perform a particular task.
In our example, we want an easy little time to countdown from one minute. Let’s build our first JavaScript countdown display:
var seconds = 1*60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
// document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
document.getElementById('dmin').innerHTML=minutes;
document.getElementById('dsec').innerHTML=remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
// document.getElementById('countdown').innerHTML = "Buzz Buzz";
//location.reload();
myalarm();
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
In our myalarm function we included a mp3 file using "soundmanager2.js" library.SoundManager 2 makes it easier to play audio using JavaScript.
Here our example:
function myalarm() {
setTimeout(function() {
loadScript('soundmanager2.js', function() {
window.setTimeout(function() {
soundManager.setup({
onready: function() {
soundManager.createSound({
id:'foo',
url:'alarm-clock-01.mp3'
}).play();
},
ontimeout: function() {
msg('Loaded OK, but unable to start: unsupported/flash blocked, etc.');
}
});
// ensure start-up in case document.readyState and/or DOMContentLoaded are unavailable
soundManager.beginDelayedInit();
}, 1000);
});
},1000);
}