chrome浏览器下audio自动播放的hack

Little_XM 发布于2019-08-23 15:33 / 1936人阅读

摘要：但是，新版的浏览器禁止了自动播放音频的功能，见鬼了。当然，这不是特例，像全屏操作，浏览器也是禁止脚本操作的。具体实现静音自动播放循环播放如果是轮询，这个时间必须大于音频的长度。

前言

也许很多前端遇到过这个需求：消息提醒。
一般来说，可以简单的实现绝不会用复杂的方式，audio标签提供了这个功能。
但是，新版的chrome浏览器禁止了js自动播放音频的功能，见鬼了。

音频播放

这是最简单的音频播放脚本，但是在chrome下，抛出异常：Uncaught (in promise) DOMException，原因是这种操作必须由用户发起。当然，这不是特例，像F11全屏操作，浏览器也是禁止脚本操作的。
但是我们有这个需求，怎么破？

绝不屈服的脑洞

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

具体实现

结语

这个方法经过在chrome上的实测，可以使用。
但是其他浏览器未做测试，据说有的浏览器，似乎是IE不支持muted属性，限于操作系统，没做测试，如果在IE运行有问题，可以给我提个醒。

GPU云服务器云服务器抖音自动播放下一个视频 webrtc audio播放 webrtc切换audio播放设备 webrtc+chrome+播放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102228.html

浏览器兼容问题

摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。一、什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...

wenshi11019 2019-08-26 13:57 评论0 收藏0
Audio: 如果你愿意一层一层剥开我的心

摘要：基本用法属性目前只支持你可以看出他们在里表现的差异关于标签支持的音频类型，可以参考常用属性音频流文件就绪后是否自动播放无需预加载只需要加载元数据，例如音频时长，文件大小等。我觉得DOM就好像是元素周期表里的元素，JS就好像是实验器材，通过各种化学反应，产生各种魔术。 showImg(https://segmentfault.com/img/bVO9vK?w=1440&h=814); ...

wangjuntytl 2019-08-20 17:14 评论0 收藏0