浏览器语音桌面通知,Notification API

栏目: Android · 发布时间: 5年前

内容简介:之前在浏览Youtube时,突然看到浏览器右上角弹出一个通知,点击就就进到了指定视频界面,感觉很是不错,如果加上在

之前在浏览Youtube时,突然看到浏览器右上角弹出一个通知,点击就就进到了指定视频界面,感觉很是不错,如果加上 语音效果 结合WebSocket,正好可以用到自己的毕业设计之中。

关于Notification

MDN 上的介绍是: 用于向用户配置和显示桌面通知 ,使用的时候必须是在 Web Worker 中使用。更为详细的介绍可以去看看 HTML5 桌面通知:Notification API ,这位大佬已经写的很详细了,线上demo可以点击 线上demo

展示效果

浏览器语音桌面通知,Notification API

构造方法

let notification = new Notification(title, options)

参数

title :显示的通知标题

options :设置通知的对象:其属性包含如下:

属性 作用
dir 控制文字的方向,自动: auto 、从左到右: ltr 、从右到左: rtl
lang 指定通知中所使用的语言
body 显示的文本内容
tag 主键ID
icon 显示的图片地址

兼容性

浏览器语音桌面通知,Notification API

实现语音

简单了解HTML5中的Web Notification桌面通知 中作者列出了 silentsound 属性可用于语音播放,但亲测后并不生效。

// new Notification(title, options)
let options = {
    // 通知显示内容
    body: content, 
    // 通知出现的时候,是否要有声音。默认false, 表示无声。(测试无效)
    silent: true,
    // 字符串。音频地址。表示通知出现要播放的声音资源。(测试无效)
    sound: 'https://bs.xcang.xyz/voice/notice_test.mp3', 
    // 是否一直显示通知
    requireInteraction: false,
    // 通知显示的图片
    icon: 'https://bs.xcang.xyz/image/icon.jpeg'
};
复制代码

因此我换了一种思路,代码如下:

let audio = document.createElement('audio');
// 音频地址
audio.src = 'https://bs.xcang.xyz/voice/notice_test.mp3';
复制代码

我在设置完options后,直接新建一个 audio 元素,在用户允许通知后操作 play() 就可以播放语音了,代码如下:

// 先检查浏览器是否支持该API
if (!('Notification' in window)) {
    alert('抱歉,该浏览器不支持Notification API');
} else {
  let permission = Notification.permission;
  // 判断用户是否允许接受通知
  if (permission === 'granted') {
    // 允许通知
    let notice = new Notification(title, options);
    play && audio.play();
  } else if (permission === 'default') {
    // 继续向用户询问是否允许接受通知
    Notification.requestPermission().then((res) => {
      if (res === 'granted') {
    	// 允许通知
    	let notice = new Notification(title, options);
        play && audio.play();
      }
    });
  } else {
  // 拒绝
  console.log('用户拒绝了');
  }
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

应用密码学:协议、算法与C源程序(原书第2版)

应用密码学:协议、算法与C源程序(原书第2版)

(美)Bruce Schneier / 吴世忠、祝世雄、张文政 等 / 机械工业出版社 / 2014-1 / 79.00

......我所读过的关于密码学最好的书......该书是美国国家安全局最不愿意见到出版的书...... —— 《Wired》 ......不朽的......令人着迷的......计算机程序员必读的密码学上决定性的著作...... —— 《Dr.Dobb's Journal》 ......该领域勿庸置疑的一本权威之作。 —— 《PC Magazine》 ..........一起来看看 《应用密码学:协议、算法与C源程序(原书第2版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具