博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
chrome浏览器下audio自动播放的hack
阅读量:5977 次
发布时间:2019-06-20

本文共 584 字,大约阅读时间需要 1 分钟。

前言

也许很多前端遇到过这个需求:消息提醒。

一般来说,可以简单的实现绝不会用复杂的方式,audio标签提供了这个功能。
但是,新版的chrome浏览器禁止了js自动播放音频的功能,见鬼了。

音频播放

这是最简单的音频播放脚本,但是在chrome下,抛出异常:Uncaught (in promise) DOMException,原因是这种操作必须由用户发起。当然,这不是特例,像F11全屏操作,浏览器也是禁止脚本操作的。

但是我们有这个需求,怎么破?

绝不屈服的脑洞

能否不操作play呢?

chrome不仅禁止了脚本自动调用play,还禁止了audio的autoplay属性。
但是,如果音频是静音状态,autoplay属性还是可以生效的。意思是,你可以播放,但是不能干扰用户的视听。
这就给我们提供了一个hack的方法:
默认开启音频的静音播放,而且是循环播放,当我们需要提醒用户的时候,把声音打开,播放时间设置为0秒,播放完毕,关掉声音,继续循环。
是的,音频一直在播放,但是用户听不见。只有我们想让用户听见的时候才能听见,客观上也能实现需求。

具体实现

结语

这个方法经过在chrome上的实测,可以使用。

但是其他浏览器未做测试,据说有的浏览器,似乎是IE不支持muted属性,限于操作系统,没做测试,如果在IE运行有问题,可以给我提个醒。

转载地址:http://yzpox.baihongyu.com/

你可能感兴趣的文章
linux的Nginx安装、默认虚拟主机、用户认证、域名重定向配置介绍
查看>>
zabbix的主动模式和被动模式、添加监控主机、添加自定义模板、处理图形中的乱码、自动发现...
查看>>
第十三章、facl及用户及Linux终端
查看>>
网页中模拟Excel电子表格实例分享
查看>>
002-Zabbix-网络设备自动监控(cisco)
查看>>
Python2.7基础知识点思维导图
查看>>
分布式系统
查看>>
性能测试压力测试
查看>>
matlab-高数 polar 极坐标系 绘制阿基米德线,心形线
查看>>
Linux文件目录结构2
查看>>
企业如何测试邮件系统反垃圾反病毒的实际效果
查看>>
虚拟机创建静默快照报错:msg.snapshot.error-QUIESCINGERROR
查看>>
根据根据图片的url怎么取得图片ImageView对象
查看>>
mongodb部署以及数据操作
查看>>
[置顶] 强大的jquery选择器
查看>>
周二 的 开始
查看>>
我喜欢的设计好的网站列表
查看>>
Cache一致性与2种基本写策略(1)
查看>>
CSM+3PAR帮助XXX教育技术中心
查看>>
SOA与微服务基本原则及对比
查看>>