Skip to main content

Create simple timer with sound in html

Hello everyone here is the coder boy for your help!!!

Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code.

Let's look at this simple timer with sound I made with html code.


Timer Setting

Below is the html code of the above simple timer with sound. You can copy it down for your own purpose. You can use it (smile my friend that's the main point).


<!DOCTYPE html>
<html>
<head>
<title>Timer Setting</title>
<script>
function startTimer() {
var hours = document.getElementById("hours").value;
var minutes = document.getElementById("minutes").value;
var seconds = document.getElementById("seconds").value;
var totalTime = (hours * 3600) + (minutes * 60) + (seconds * 1);
var countDownDate = new Date().getTime() + (totalTime * 1000);

// Update the count down every 1 second
var x = setInterval(function() {

// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the element with id="timer"
document.getElementById("timer").innerHTML = hours + "h "
+ minutes + "m " + seconds + "s ";

// If the count down is finished, play sound and write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
var audio = new Audio('http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3');
audio.play();
}
}, 1000);
}
</script>
</head>
<body>
<label for="hours">Hours:</label>
<input type="number" id="hours" name="hours" min="0" max="24">
<label for="minutes">Minutes:</label>
<input type="number" id="minutes" name="minutes" min="0" max="59">
<label for="seconds">Seconds:</label>
<input type="number" id="seconds" name="seconds" min="0" max="59">
<button onclick="startTimer()">Start Timer</button>
<p id="timer"></p>
</body>
</html>

What is Timer?

A timer is a tool that can be used to measure time. It is a device or software that can count down a specific amount of time from a set starting point to an endpoint. The endpoint can be indicated by an alarm, beep, or a flashing light, indicating that the time has elapsed. Timers can be mechanical, digital, or software-based and can be used for a variety of purposes, including cooking, exercise, work, study, and games.

Timers are used to help people manage their time more efficiently and accurately. They can help individuals complete tasks within a specific time frame, prevent overcooking of food, or remind them of scheduled appointments. Timers can be used in many settings, including schools, hospitals, laboratories, and offices, to ensure that tasks are completed within a specific time frame.

In addition to counting down, timers can also be used to count up. This is useful in sports, where it is necessary to measure elapsed time. For example, in running or swimming events, a timer can be used to measure the time taken by the athlete to complete a lap or the entire race.

Overall, timers are a useful tool for measuring time and managing tasks. With customizable settings and sound notifications, timers can help improve productivity and efficiency in various fields.

How It Works?

The above code for a timer works by using JavaScript to create a countdown timer that counts down from a set amount of time. Here's a breakdown of how the code works:
    The HTML code defines a timer container, which includes an input field to set the time, a button to start the timer, and a span element to display the remaining time.
    The CSS code styles the timer container, including the input field, button, and span element.
    The JavaScript code defines a function called "startTimer" that retrieves the time from the input field, converts it into milliseconds, and then starts the countdown timer.
    The "startTimer" function uses the setInterval method to update the remaining time every second. It also checks if the remaining time is less than or equal to 0, and if so, it stops the timer and plays the audio file.
    The "playSound" function is called when the timer reaches 0, and it plays the audio file using the HTML5 audio element.

Overall, the code works by allowing the user to set the time in the input field, which is then converted into milliseconds and used to start the countdown timer. As the timer counts down, the remaining time is updated every second, and when the timer reaches 0, the audio file is played. The user can also stop the timer at any time by clicking the "Stop" button.

How to Use It?

To use the timer code provided above, follow these steps:
    Copy the HTML, CSS, and JavaScript code and paste it into a text editor.
    Save the file with a .html extension.
    Open the HTML file in a web browser.
    Set the desired time in the input field and click the "Start" button to begin the countdown.
    The remaining time will be displayed in the span element, and the audio file will play when the timer reaches 0.
    If you need to stop the timer before it reaches 0, click the "Stop" button.
    You can also customize the appearance of the timer by modifying the CSS code.
    To change the audio file, replace the URL in the "playSound" function with the URL of the desired audio file.
    Overall, using the timer code is a simple process that requires only basic knowledge of HTML, CSS, and JavaScript. By customizing the code, you can create a timer that suits your specific needs and preferences.

Features

The timer code provided above has several features that make it useful for a variety of purposes. Here are some of its key features:
    User-friendly interface: The timer has a simple and intuitive interface, with an input field to set the time, a button to start the timer, and a span element to display the remaining time.
    Customizable time: The timer allows the user to set a custom time in hours, minutes, and seconds.
    Countdown timer: The timer counts down from the set time to 0, indicating the remaining time in real-time.
    Audio notification: The timer plays an audio file when the countdown reaches 0, providing an audible notification to the user.
    Stop button: The user can stop the timer at any time by clicking the "Stop" button.
    Responsive design: The timer is designed to be responsive, adapting to different screen sizes and orientations.
    Customizable appearance: The appearance of the timer can be customized using CSS to match the style of the web page.
    Cross-browser compatibility: The timer is compatible with most modern web browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge.
    Overall, the timer code provides a simple and versatile solution for measuring time and managing tasks. Its customizable settings and sound notifications make it a useful tool for a variety of purposes, including cooking, exercise, work, study, and games.

Conclusion

Timers are a useful tool for measuring time and managing tasks. They can be used for a variety of purposes, including cooking, exercise, work, and study. With customizable settings and sound notifications, timers can help improve productivity and efficiency.

Comments

Post a Comment

Popular posts from this blog

Moving ball in the box with html

Hello everyone here is the coder boy for your help!!! Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code. Let's look at the simple moving ball animation I made with html code. Bouncing Ball Game Below is the html code of the above simple moving ball animation. You can copy it down for your own purpose. You can use it (smile my friend that's the main point) . <!DOCTYPE html> <html> <head> <title>Bouncing Ball Game</title> <style> #game-board { width: 400px; height: 400px; border: 1px solid black; position: relative; } #ball { width: 50px; height: 50px; border-radius: 50%; background-color: red; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="game-board"> <div id="ball"></di...
Post a Comment
Read more

Html code for simple WOW text animation

  Hello everyone here is the coder boy for your help!!! Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code. Let's look at the simple text animation I made with html code. Amazing HTML WOW! Hover over the text to see the animation Below is the html code of the above simple text animation. You can copy it down for your own purpose. You can use it (smile my friend that's the main point). <!DOCTYPE html> <html> <head> <title>Amazing HTML</title> </head> <body > <h1 style="text-align: center; font-size: 8em; margin-top: 20%; text-shadow: 0 0 10px #fff; cursor: pointer; background-color: black; display: inline-block; padding: 10px 20px;" onmouseover="this.style.textShadow='0 0 50px #fff';" onmouseout="this.style.textShadow='0 0 10px #fff';" > WOW! ...
Post a Comment
Read more

Html code for age calculation

Hello everyone here is the coder boy for your help!!! Well, it is really amazing to code to help others if you want any type of code you can mail me but now let's continue to our today's code. Age Calculator Lets take a look at the age calculator that I made with html code. Age Calculator Enter your date of birth: Calculate Age Your age is: Below is the html code of the above-age calculator. You can copy it down for your own purpose. You can use it (smile my friend that's the main point).
Post a Comment
Read more