如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

苏南大叔刚刚给大家介绍了,notification这个函数的使用( https://newsn.net/say/html5-notification.html )。在html5的新功能Notification的函数说明中,我们可以看到和body和icon同级的位置,有个选项叫做sound,还有个选项叫做slient。

属性不支持

通过这2个地方的官方说明,我们可以知道,到目前本文写作时为止。对于我们最常见的浏览器环境下来说,这2个特性,都是不支持的。也就是说,通过sound属性添加个声音素材的事情,只是一个美好的愿望。各大浏览器根本就不给面儿。

html5新功能Notification的声音提醒解决方案 - notification
html5新功能Notification的声音提醒解决方案(图1-1)

可能的方案

而实际的开发过程中,确实有提示音这个需求。我们一般是通过额外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/ 。感谢您的阅读。

 【源码】代码片段及相关软件点此获取

 【js】秘籍文章入口,仅传授于有缘之人   js    notification

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!