内容简介:之前在浏览Youtube时,突然看到浏览器右上角弹出一个通知,点击就就进到了指定视频界面,感觉很是不错,如果加上在
之前在浏览Youtube时,突然看到浏览器右上角弹出一个通知,点击就就进到了指定视频界面,感觉很是不错,如果加上 语音效果 结合WebSocket,正好可以用到自己的毕业设计之中。
关于Notification
在 MDN 上的介绍是: 用于向用户配置和显示桌面通知 ,使用的时候必须是在 Web Worker 中使用。更为详细的介绍可以去看看 HTML5 桌面通知:Notification API ,这位大佬已经写的很详细了,线上demo可以点击 线上demo 。
展示效果
构造方法
let notification = new Notification(title, options)
参数
title
:显示的通知标题
options
:设置通知的对象:其属性包含如下:
属性 | 作用 |
---|---|
dir | 控制文字的方向,自动: auto 、从左到右: ltr 、从右到左: rtl |
lang | 指定通知中所使用的语言 |
body | 显示的文本内容 |
tag | 主键ID |
icon | 显示的图片地址 |
兼容性
实现语音
在 简单了解HTML5中的Web Notification桌面通知 中作者列出了 silent
和 sound
属性可用于语音播放,但亲测后并不生效。
// 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('用户拒绝了'); } } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 网上冲浪姿势将革新?Mozilla 正在讨论研发语音浏览器
- 智能语音机器人中的语音通话实践
- iOS 语音播报解决方案(实现支付宝语音收款功能)
- Microsoft Teams Voice语音落地系列-5 实战: Sonus语音网关配置
- Python入门 —— 语音识别
- 语音唤醒实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java性能优化权威指南
Charlie Hunt、Binu John / 柳飞、陆明刚 / 人民邮电出版社 / 2014-3 / 109.00 元
Java性能优化圣经!Java之父重磅推荐! 本书由曾任职于Oracle/Sun的性能优化专家编写,系统而详细地讲解了性能优化的各个方面,帮助你学习Java虚拟机的基本原理、掌握一些监控Java程序性能的工具,从而快速找到程序中的性能瓶颈,并有效改善程序的运行性能。 Java性能优化的任何问题,都可以从本书中找到答案!一起来看看 《Java性能优化权威指南》 这本书的介绍吧!
XML、JSON 在线转换
在线XML、JSON转换工具
RGB HSV 转换
RGB HSV 互转工具