求助：如何在JavaScript中实现自定义提示音触发时的浏览器标签高亮或闪烁效果？

嘿，刚好我之前做过类似的功能，给你分享两个纯JavaScript就能搞定的标签页高亮方法，完美适配你已经在用的Page Visibility API场景：

方法一：标题文字闪烁切换 #

这是最常见的实现方式，当用户不在当前标签页时，交替显示原标题和提示信息，直到用户切回来。

代码示例： #

// 保存原始标题
const originalTitle = document.title;
let titleInterval;

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 页面不可见时启动标题闪烁
    startTitleBlink('🔔 有新消息！');
  } else {
    // 页面可见时停止闪烁，恢复原标题
    stopTitleBlink();
  }
});

function startTitleBlink(message) {
  let isOriginal = true;
  titleInterval = setInterval(() => {
    document.title = isOriginal ? message : originalTitle;
    isOriginal = !isOriginal;
  }, 1000); // 每秒切换一次，可根据需求调整速度
}

function stopTitleBlink() {
  clearInterval(titleInterval);
  document.title = originalTitle;
}

方法二：Favicon图标切换 #

如果觉得标题闪烁不够醒目，还可以配合切换网站图标（favicon），比如用一个带提示标记的图标替换原图标：

代码示例： #

const originalFavicon = document.querySelector('link[rel="icon"]').href;
const alertFavicon = '/path/to/alert-icon.png'; // 替换成你的提示图标路径
let faviconInterval;

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    startFaviconBlink();
  } else {
    stopFaviconBlink();
  }
});

function startFaviconBlink() {
  let isOriginal = true;
  faviconInterval = setInterval(() => {
    const faviconEl = document.querySelector('link[rel="icon"]');
    faviconEl.href = isOriginal ? alertFavicon : originalFavicon;
    isOriginal = !isOriginal;
  }, 1000);
}

function stopFaviconBlink() {
  clearInterval(faviconInterval);
  document.querySelector('link[rel="icon"]').href = originalFavicon;
}

额外提示 #

• 你可以把两种方法结合起来，标题+图标双重提示，效果更醒目
• 记得在用户切回页面时一定要清理定时器，避免不必要的性能消耗
• 如果需要在特定事件（比如收到新消息）时触发高亮，只需要在事件触发时检查页面是否隐藏，再调用对应的start方法即可

这样就能完美解决用户关闭扬声器时的提示失效问题啦！

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