我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔刚刚给大家介绍了,notification这个函数的使用(链接参见文末)。在html5的新功能Notification的函数说明中,可以看到和body和icon同级的位置,有个选项叫做sound,还有个选项叫做slient。

苏南大叔:html5新功能Notification的声音提醒解决方案 - html5-notification
html5新功能Notification的声音提醒解决方案(图2-1)

本文基于下面的这篇文章,请先阅读下面的这篇文章:

属性不支持

关于sound属性,可以点击这里查看下说明:

而关于slient属性,点击这里查看:

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

苏南大叔:html5新功能Notification的声音提醒解决方案 - notification
html5新功能Notification的声音提醒解决方案(图2-2)

可能的方案

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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