前言
也许很多前端遇到过这个需求:消息提醒。
一般来说,可以简单的实现绝不会用复杂的方式,audio标签提供了这个功能。但是,新版的chrome浏览器禁止了js自动播放音频的功能,见鬼了。音频播放
这是最简单的音频播放脚本,但是在chrome下,抛出异常:Uncaught (in promise) DOMException
,原因是这种操作必须由用户发起。当然,这不是特例,像F11全屏操作,浏览器也是禁止脚本操作的。
绝不屈服的脑洞
能否不操作play呢?
chrome不仅禁止了脚本自动调用play,还禁止了audio的autoplay属性。但是,如果音频是静音状态,autoplay属性还是可以生效的。意思是,你可以播放,但是不能干扰用户的视听。这就给我们提供了一个hack的方法:默认开启音频的静音播放,而且是循环播放,当我们需要提醒用户的时候,把声音打开,播放时间设置为0秒,播放完毕,关掉声音,继续循环。是的,音频一直在播放,但是用户听不见。只有我们想让用户听见的时候才能听见,客观上也能实现需求。具体实现
结语
这个方法经过在chrome上的实测,可以使用。
但是其他浏览器未做测试,据说有的浏览器,似乎是IE不支持muted属性,限于操作系统,没做测试,如果在IE运行有问题,可以给我提个醒。