html5新功能Notification的声音提醒解决方案
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
苏南大叔刚刚给大家介绍了,notification这个函数的使用(链接参见文末)。在html5的新功能Notification的函数说明中,可以看到和body和icon同级的位置,有个选项叫做sound,还有个选项叫做slient。
本文基于下面的这篇文章,请先阅读下面的这篇文章:
属性不支持
关于sound属性,可以点击这里查看下说明:
而关于slient属性,点击这里查看:
通过这2个地方的官方说明,我们可以知道,到目前本文写作时为止。对于我们最常见的浏览器环境下来说,这2个特性,都是不支持的。也就是说,通过sound属性添加个声音素材的事情,只是一个美好的愿望。各大浏览器根本就不给面儿。
可能的方案
而实际的开发过程中,确实有提示音这个需求。我们一般是通过额外play一个声音来执行的。我们下面的例子中,我们通过『金十数据』中的相关代码,作为demo。下面的代码段并不完整,所以不能直接复制使用,仅仅作为示意。
var t, e = a.IEVersion(), i = "//cdn.jin10.com/assets/media/notice.wav?20170216";
return e > -1 && e < 9 ? (s("body").append('<embed id="J_audiotagIE" src="' + i + '" autostart="false" loop="false" width="0" height="0"></embed>'),
t = document.getElementById("J_audiotagIE")) : (t = new Audio,
t.src = i,
t.loop = !1),
{
play: function() {
return 2 != a.cookie.get("onSound") && (t.loop = "undefined" != typeof loop && loop,
void t.play())
},
pause: function() {
t.pause()
}
}
大体上来说,原理就是,在ie9以下,使用embed标签,加载wav文件,最后,使用这个embed对象的play方法,进行播放。在ie9及以上,和其他的浏览器里面,我们new一个Audio的js对象,然后使用这个audio的play方法,播放对应的wav文件。
当然,我们还可以使用audio标签加载声音进行播放。不过,同样,ie下面可能会有些问题。大家对ie区别对待调试即可。
相关链接
总结
下面是口号时间,关注互联网发展,关注苏南大叔的博客。https://newsn.net/ 。感谢您的阅读。
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。