Click here to Skip to main content
15,899,026 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[^]
 
Share this answer
 
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
-->
 
Share this answer
 

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