Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
Last active June 26, 2024 23:09
Show Gist options
  • Save cferdinandi/9842dbe5f7286f0ed1edbb7203453a61 to your computer and use it in GitHub Desktop.
Save cferdinandi/9842dbe5f7286f0ed1edbb7203453a61 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
}
#app {
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Timer</h1>
<div id="app" aria-live="polite">5</div>
<script>
// Get the #app element
let app = document.querySelector('#app');
// Track the count
let count = 5;
/**
* Play the chime sound
*/
function playSound () {
let ding = new Audio('ding.mp3');
ding.play();
}
// Run a callback function once every second
let timer = setInterval(function () {
// Reduce count by 1
count--;
// Update the UI
if (count > 0) {
app.textContent = count;
} else {
app.textContent = '⏰';
clearInterval(timer);
playSound();
}
}, 1000);
</script>
</body>
</html>
@vabue
Copy link

vabue commented Mar 11, 2023

Not working anymore "Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission".
Seems like browsers started to be more restrictive.

@cferdinandi
Copy link
Author

Just tested in Chromium, Firefox, and Safari. It worked for me in all three instances, but... if you have Audio/Video autoplay blocked, you will get that error message, which seems reasonable.

@Gib9368
Copy link

Gib9368 commented Jun 26, 2024

Doen't ding ie sound not working on my set up.
Mac os 10.12.6

@cferdinandi
Copy link
Author

See above

@Gib9368
Copy link

Gib9368 commented Jun 26, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment