Chrome 66 禁止声音自动播放

声音无法自动播放一直在IOS/Android上面都是一个惯例, 桌面端的 Safari在2017年的11版本中也宣布禁止带有声音的多媒体自动播放, 紧接着2018年4月份Chrome发布的66版本也正式关闭了声音自动播放, 也就是 <audio autoplay></audio> <video autoplay></video>在桌面版的浏览器也将失效.

一开始移动端是完全禁止带有音频的媒体自动播放, 是因为考虑到了手机带宽和对电池的消耗, 但是后来又改了, 因为浏览器厂商发现网页开发人员可能会使用GIF动态图替代视频实现自动播放, 正如IOS文档所说, 使用GIF的带宽流是video(h24)格式的12倍, 而播放性能消耗是2倍, 所以这样对用户反而不利, 还有开发者使用Canvas进行hack, 如Android Chrome文档中提到.

因此浏览器厂商开放了对多媒体自动播放的限制, 只要具备以下条件就能自动播放:

1. 没有音频轨道, 或者设置了muted属性

2. 在视图里面是可见的, 要插入到DOM里面并且不是display: none; 或者 visibility: hidden的, 没有滑出可视区域.

也就是说只要你不开声音扰民, 且对用户可见, 就可以自动播放.

桌面版的Safari浏览器也使用了这个策略, 升级到 Safari 11 之后的说明:

以及Chome文档的说明

这个策略对视频网站的冲击非常大, 比如用Safari打开tudou

Chrome 的禁止更加人性化一点, 他有一个MEI的策略, 这个策略大概就是说只要用户在当前网页主动播放超过7s的媒体, 视频窗口不能小于 200 X 140, 就允许自动播放

对于网页开发者来说应该如何规避这个风险?

Chrome文档给了一个最佳实践, 先把音频加一个muted的属性就可以自动播放, 然后显示一个声音被关掉的按钮, 提示用户点一下打开声音, 对于视频来说, 确实可以这样处理, 但是对于音频来说, 很多人是监听页面的点击事件, 只要点一次就可以开始播放, 一般都是播放背景音乐, 也不需要按钮,但是如果有多个音频资源的页面应该如何自动播放呢?

首先, 如果用户还没有进行交互就调用播放声音的API, Chrome会给个提示

Safari会这么提示

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

意思就是说, 用户还没有进行交互, 不能调用play(), 那么用户的交互包括哪些呢?

包括用户触发的 touchend, click, doubleclick或者是deydown, 在这些事件里面可以调用play()

所以上面提到的很多人是监听的整个页面的点击事件进行播放的, 不管点击哪里, 只要点了就行, 包括触摸下滑

原生播放视频只能使用 video 标签, 而原生音频播放除了使用 audio标签外, 还可以使用一个API叫做 AudioContext, 它是一个能够用来控制声音播放并且带了很多丰富的操作接口.

参考链接

Chrome 66禁止声音自动播放之后

Chrome 新的自动播放策略

利用HTML5 Web Audio API给网页JS交互增加声音