0

I am trying to enable alarm feature by using audio.play(), feature works fine when the page from which I called is open but if I close it after triggering the JS event, audio.play() doesnt work. Is there any way to enable it?

Find my code below.

HTML 

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Document</title>
</head>

<body>



<div class="container my-3">
<h1>Option to set an alarm</h1>

<form>
<div class="form-group">
<label for="alarm">Set Alarm</label>
<input type="text" class="form-control" id="alarm" name="alarm"
placeholder="Enter the time in yyyy-mm-dd hh:mm:ss">

<small id="alarmHelp" class="form-text text-muted">We'll never share your alarm with anyone else.</small>
</div>


<button id="alarmSubmit" type="submit" class="btn btn-primary">Set Alarms</button>
</form>

<div class="my-2">
<ul id="defs"></ul>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>

<script src="tut54.js"></script>

</html>

Javascript code

const alarmSubmit = document.getElementById('alarmSubmit');

// Add an event listener to the submit button
alarmSubmit.addEventListener('click', setAlarm);

var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');

// function to play the alarm ring tone
function ringBell() {

audio.play();
}

// This function will run whenever alarm is set from the UI
function setAlarm(e) {

e.preventDefault();
const alarm = document.getElementById('alarm');
alarmDate = new Date(alarm.value);

console.log(`Setting Alarm for ${alarmDate}...`);
now = new Date();

let timeToAlarm = alarmDate - now;
console.log(timeToAlarm);
if(timeToAlarm>=0){
setTimeout(() => {

ringBell();

}, timeToAlarm);
}
}

After entering the date and time and click Set alarms button then it calls the audio.play() successfully but after clicking Set alarms button and then if I click the Set alarm button and then close the page then audio.play() wont get triggered. How can we trigger the audio.play() even when the page is closed

tulu matinee
  • 61
  • 1
  • 9
  • 1
    Typically, a non-existing code doesn't run. When you close the page, all the content and the JS on it are gone, and all the pending tasks are specifically aborted in the [closing process](https://html.spec.whatwg.org/multipage/browsing-the-web.html#unloading-document-cleanup-steps). – Teemu May 23 '21 at 11:37
  • There's service worker to trigger notification, but from what I see actually playing arbitrary audio isn't supported, and you can't even open a new window without user actually clicking your notification https://stackoverflow.com/questions/30302636/clients-openwindow-not-allowed-to-open-a-window-on-a-serviceworker-google-c It's kinda expected really, otherwise we would've been inundated with random ads playing even when we're not using our computer. – Martheen May 23 '21 at 11:47
  • Wont it possible with addEventListener? – tulu matinee May 23 '21 at 12:09
  • Np, please follow the link in my previous comment, it clarifies what happens when a page is closed. – Teemu May 23 '21 at 14:25

0 Answers0