Click here to Skip to main content
15,072,735 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
HTML
<title>Time

<h1>Time-based greeting</h1>
Timer 30 seconds
Beep
<h1 id="demo"></h1>
<script>

var bleep1 = new Audio();
bleep1.src = './CorrectAnswer.mp3';	
var myTemp = []

function myTimer() {
    var timeleft = 33;
    var n=3;
    var t=1;
    var Timer = setInterval(function(){
        if(timeleft>33){
            timeleft = timeleft - t;
        }
        else {
            timeleft = timeleft - n;
        } 
        console.log("Time Left: "+timeleft);
        if(timeleft < n)
            clearInterval(Timer);
        document.getElementById("demo").innerHTML = "Your timer is running: "+timeleft;    
        if(timeleft < n)
            document.getElementById("demo").innerHTML = "Your time is up! ";  
    },1000);
}
</script>

<br><br>
<h2>F12 Check Console </h2>


What I have tried:

onmouseover="bleep1.play()" works. I can't get it play after myTimer() is completed
Posted
Updated 10-Aug-21 22:05pm
v2

Assuming your page has permission to play audio without user interaction, it would be as simple as:
JavaScript
if (timeleft < n) {
    clearInterval(Timer);
    bleep1.play();
}
However, note that most browsers block script from playing sounds until the user has interacted with the page:
Autoplay guide for media and Web Audio APIs - Web media technologies | MDN[^]
   
Richard Deeming, I do appreciate your response! Wasn't expecting reply so soon.
HTML & JavaScript allows me to keep track of time a button was clicked. Results added to LocalStorage.
Here's sample of my project. Playing sound on completion of timer worked like a charm :-)

<!DOCTYPE html>


<title>Time


Time-based greeting


Show Time
Timer in seconds



var bleep1 = new Audio();
bleep1.src = './CorrectAnswer.mp3';
var myTemp = [[]]
var newstr = [[]]
if (localStorage.getItem('old') !== null) {
console.log('logfile exists');
} else {
console.log('This is your first entry ');
myold = ([["No previous entries found: "], ["mock-up data: Thu Aug 12 2021 08:07:20"]]);
localStorage.setItem('old', JSON.stringify(myold));
}
function myFunction() {
console.clear();
var greeting;
var time = new Date().getHours();
var d = new Date();
var timestr = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+" "+ (d.getMonth()+1)+"-"+d.getDate()+"-"+d.getFullYear() ;
if (time >= 6 && time < 12) {
greeting = "Good morning: ";
} else if (time >= 12 && time <= 20) {
greeting = "Good afternoon: ";
}
else if (time > 21&& time <= 24 ) {
greeting = "Time to sleep: ";
} else
{
greeting = "Wellcome Time Traveler: ";
}
document.getElementById("demo").innerHTML = greeting+timestr;
console.log(greeting+timestr);
dnow = Date().toLocaleString();
dnow = dnow.split(" ", 9);
myclick = dnow[0]+" "+dnow[1]+" "+dnow[2]+" "+dnow[3]+" "+dnow[4];
newstr = (greeting+" "+myclick)
sessionStorage.setItem('myTemp', JSON.stringify(newstr));
myTemp = sessionStorage.getItem('myTemp');
console.log('Current: '+ myTemp);
console.log('Click log: ');
myPush()
}
function myPush() {
// get copy of localStorage old
myString = JSON.parse(localStorage.getItem('old'));
myTemp2 = JSON.parse(sessionStorage.getItem('myTemp'));
myString.push([myTemp2]);
console.table(myString);
// update localStorage old
localStorage.setItem('old', JSON.stringify(myString));
}
function myTimer() {
console.clear();
var x = prompt('Enter a number', '12');
var timeleft = parseInt(x);
var n=1;
var t=3;
var Timer = setInterval(function(){12
// last 12 seconds message will appear every second
if(timeleft>12){
timeleft = timeleft - t;
}
else{
timeleft = timeleft - n;
}
console.log("Time Left: "+timeleft);
if(timeleft >= n)
document.getElementById("demo").innerHTML = "Your timer is running: "+timeleft;
if(timeleft < n) {
clearInterval(Timer);
bleep1.play();
document.getElementById("demo").innerHTML = "Your time is up! ";
}
},1000);
}





F12 Check Console & Application old




<!--
https://www.w3schools.com/js/tryit.asp?filename=tryjs_elseif
myold = ([["Good morning: 10:32:44 8-10-2021"], ["Good afternoon: 12:10:16 8-10-2021"], ["Good morning: 10:25:34 8-11-2021"]]);
localStorage.setItem('old', JSON.stringify(myold)); do manually if missing
-->
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900