巧解 Web 端 Notification 语音自动播放难题：从 W3C 示例中汲取灵感

前端

2023-11-19 11:24:56

引言

Notification API 是 Web 开发中一种重要的工具，它允许应用程序向用户显示系统消息。通过 Notification，开发者可以创建弹出窗口，在不中断用户当前活动的情况下传达重要信息。

然而，在使用 Notification 时，开发者可能会遇到一个常见的挑战：语音自动播放问题。当 Notification 弹出时，可能同时会自动播放一段声音，这可能会干扰用户，特别是当他们身处安静的环境中时。

W3C 示例中的启示

为了解决自动播放问题，我们可以从 W3C 关于 autoplay 的示例中汲取灵感。在 W3C 网站上，有一个用于演示 audio autoplay 属性的页面。有趣的是，该页面在点击链接打开时可以自动播放声音，但在刷新页面时却不会。

通过仔细观察代码，我们发现页面使用了以下技巧：

将 <audio> 元素放在 <noscript> 标签中，这样只有在 JavaScript 禁用的情况下才会加载音频文件。
在 JavaScript 代码中，使用 autoplay 属性设置音频文件自动播放。

解决方案

我们可以借鉴 W3C 示例中的技巧，在 Notification 中解决自动播放问题。具体步骤如下：

创建一个 <div> 元素，用于容纳 Notification 内容，包括文本和 <audio> 元素。
将 <audio> 元素放在 <noscript> 标签中。
在 JavaScript 代码中，使用 Notification API 创建 Notification，并使用自定义的 DOM 结构作为 body 参数。
使用 autoplay 属性设置音频文件自动播放。

这样，当 Notification 弹出时，只有在 JavaScript 禁用的情况下才会加载音频文件。在正常情况下，音频文件将不会自动播放，从而解决了自动播放问题。

代码示例

<div id="notification-content">
  <p>重要消息！</p>
  <noscript>
    <audio autoplay>
      <source src="sound.mp3" type="audio/mpeg">
    </audio>
  </noscript>
</div>

<script>
  const notification = new Notification('标题', {
    body: document.getElementById('notification-content'),
  });
</script>