chrome浏览器通知与语音播放

HTML5 Web Notification 语法 https://developer.mozilla.org/zh-CN/docs/Web/API/notification

如果浏览器支持Web Notification，不考虑私有前缀，则window.Notification就会是一个有很多静态属性和实例方法的函数。

基本上，Web Notification所有的语法都是围绕Notification这个函数来进行的。

显然，通知这种事情是有可能扰民的，因此，必须经过用户同意才行。因此：

浏览器授权当前页面允许通知

检测当前页面权限状态

只读属性 Notification.permission 该属性的值将会是下列三个之一：

default：用户还未被询问是否授权，所以通知不会被显示。

granted：表示之前已经询问过用户，并且用户已经授予了显示通知的权限。

denied：用户已经明确的拒绝了显示通知的权限。

if (window.Notification && window.Notification.permission !== 'granted') {

    window.Notification.requestPermission();

}

浏览器会弹出授权弹窗

配置和显示桌面通知

最新的Chrome的Notification要想有效果需要https协议才行

let notification = new Notification(title, options)

title 一定会被显示的通知标题

options 可选一个被允许用来设置通知的对象。它包含以下属性：

dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
body: 通知中额外显示的字符串
tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon: 一个图片的URL，将被用于显示通知的图标。

notify(

    title: string = '新通知',

    body: string = '您有新的通知！',

    openurl: string

  ) {

    if (window.Notification) {

      const n = new Notification(title, {

        icon: icon,

        body: body,

      });

      n.onclick = () => {

        window.open(openurl);

      };

    }

  }

浏览器语音播放

private createAudio() {

    const audioElm = document.createElement('audio');

    audioElm.autoplay = true;

    audioElm.muted = false;

    audioElm.src = '/assets/audio/notify.wav';

    return audioElm;

  }

  /**

   * 播放声音

   */

  play() {if (!this.audioElm) {

        this.audioElm = this.createAudio();

        document.body.appendChild(this.audioElm);

      }

      this.audioElm.play();

  }

简单使用就自己写，也可以使用这个插件

https://github.com/jaywcjlove/iNotify

巴特西

chrome浏览器通知与语音播放

浏览器授权当前页面允许通知

配置和显示桌面通知

浏览器语音播放

最新文章

热门文章