Skip to content

Instantly share code, notes, and snippets.

Last active March 11, 2023 16:19
What would you like to do?
<!DOCTYPE html>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
#app {
font-size: 2em;
font-weight: bold;
<div id="app" aria-live="polite">5</div>
// 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');;
// Run a callback function once every second
let timer = setInterval(function () {
// Reduce count by 1
// Update the UI
if (count > 0) {
app.textContent = count;
} else {
app.textContent = '⏰';
}, 1000);
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.

Copy link

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.

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