audio 标签自动播放不起作用或者 play() 报错

audio 标签自动播放不起作用或者 play() 报错

问题描述

页面的 audio 标签设置了自动播放属性，进入页面自动播放不起作用，或者用 js 控制 play()，方法无效，报错！

解决方案

经过各种百度，谷歌，追踪到原因如下：
页面必须进行交互才能进行对 audio 播放;

声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说自动播放在在桌面版浏览器也将失效；

如Android Chrome文档提到。因此浏览器厂商放开了对多媒体自动播放的限制，只要具备以下条件就能自动播放：

（1）没音频轨道，或者设置了muted属性

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

换句话说，只要你不开声音扰民，且对用户可见，就让你自动播放，不需要你去使用GIF的方法进行hack.桌面版的浏览器在近期也使用了这个策略；

所以上面提到很多人是监听整个页面的点击事件进行播放，不管点的哪里，只要点了就行，包括触摸下滑。这种方法只适用于一个声音资源，