关闭页面后已触发的Javascript音频播放事件不生效如何解决？

问题根源 #

你当前使用的setTimeout运行在页面主线程中，只要页面被关闭，对应的浏览器渲染进程就会被系统回收，所有未执行的定时器、JS运行上下文都会直接销毁，自然无法触发audio.play()。纯网页默认没有系统后台常驻权限，不可能在完全关闭浏览器进程后还执行代码。

可行实现方案 #

方案1：Service Worker + 通知触发器（网页端最优方案） #

Service Worker是独立于页面的浏览器后台线程，只要浏览器保持运行，即使对应页面标签被关闭也能保持活跃，配合Notification Triggers API可以实现定时触发提醒：

• 首先在页面中注册Service Worker，同时申请用户的系统通知权限
• 用户设置闹钟时，将闹钟时间通过showTrigger参数提交给浏览器调度
• 闹钟触发时Service Worker可以直接调用音频播放方法，同时弹出系统通知
  注意：该方案仅在Chromium内核浏览器（Chrome、Edge等）兼容性较好，用户完全退出浏览器进程后无法生效

核心参考代码：

// 页面初始化代码
if ('serviceWorker' in navigator && 'Notification' in window) {
  // 注册Service Worker
  navigator.serviceWorker.register('/sw.js')
  // 申请通知权限
  Notification.requestPermission()
}

// 改造后的setAlarm方法
function setAlarm(e) {
  e.preventDefault();
  const alarm = document.getElementById('alarm');
  const alarmDate = new Date(alarm.value);
  const timeToAlarm = alarmDate - Date.now();
  if(timeToAlarm >= 0 && 'showTrigger' in Notification.prototype) {
    navigator.serviceWorker.ready.then(reg => {
      reg.showNotification('闹钟提醒', {
        body: '你设置的闹钟已到点',
        showTrigger: new TimestampTrigger(alarmDate.getTime()),
        silent: false
      })
    })
  }
}

// sw.js（Service Worker文件）代码
self.addEventListener('notificationclick', () => {
  const audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3')
  audio.play()
})

方案2：封装为PWA桌面/移动端应用 #

将网页打包为PWA应用添加到系统桌面后，可以获得更高的系统权限，部分移动端系统允许PWA应用后台常驻，即使对应页面标签被关闭，也能正常触发定时提醒和音频播放。

方案3：开发浏览器扩展实现 #

如果仅在特定浏览器中使用，可以开发对应浏览器的扩展程序，扩展拥有后台常驻权限，用户设置闹钟时将时间同步到扩展后台脚本，即使页面被关闭，扩展的后台线程也能执行定时任务播放音频。

注意事项 #

• 所有网页端实现方案都无法在用户完全关闭浏览器进程后生效，如果需要完全脱离浏览器运行，需要开发原生桌面或移动端应用
• 浏览器的自动休眠策略会暂停后台长时间未活动的普通定时器，设置超过2小时的闹钟建议使用Notification Triggers API调度，可靠性远高于setTimeout

内容的提问来源于stack exchange，提问作者tulu matinee