chrome下音频无法自动播放的解决办法

众所周知，chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：

直到用户有交互之后，再次调用play()方法才会正常播放。但是对于开发来说，很多情况下我们还是需要让音频自动播放的，比如实时消息通知，有最新消息的话，播放提示音，这种情况下我们该怎么办呢，经过查阅和自己的摸索，目前有以下三种办法可以较好的解决这个问题，我们来看：

1、诱导用户发起交互

我们可以在页面加载完毕后，弹出一个获取权限的通知，诱导用户点击。这样，有了用户的主动交互行为，音视频便可以正常播放了。

2、音视频静音播放

chrome允许音视频在静音的情况下自动播放。也就是说，假如给音视频增加muted属性，这种情况下chrome是允许自动播放的，对于视频来说这种办法也不失为一种可行的方案。但是对于上边我们提出的收到消息播放提示音通知这样的需求，便无法满足了。所以这种办法并不能解决音频的问题。代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><audio autoplay="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3" controls="controls" preload id="auto"></audio>
</body>
<script>document.getElementById('auto').play()
</script></html>

静音情况下，音频正常播放，不会抛错。（注意：autoplay属性在chrome中无效）

3、通过iframe实现音视频文件实现自动播放

有位外国友人写的一篇文章中，提及到这种办法，我们把音频文件放入一个html文件，然后在我们需要使用的页面中用iframe引入此页面，这样可以实现自动播放，但是经过我的多番测试发现，当前引入的页面域名，不可以和iframe的src域名相等，不然的话会不太稳定，时而报错，时而正常。例如：

假如我们现在有a.html和b.html两个页面，现在我们在本地起了localhost:3000的服务

localhost:3000/a可以访问到a页面，localhost:3000/b可以访问到b页面

a页面：

<iframe allow="autoplay" src="http://localhost:3000/b.html"></iframe>

b页面：

<audio autoplay="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3" controls="controls" preload id="auto"></audio>

那么此时，如果我们通过http://localhost:3000/a ，访问a页面则无法正常播放（时好时坏），但是a页面如果改为：

<iframe allow="autoplay" src="http://127.0.0.1:3000/b.html"></iframe>

这样的话，正常播放不会有问题。总结下来就是，父窗口(即a页面)使用域名访问，那么iframe引入b的话，就不可以使用同一个域名(使用ip或不同域名均可正常播放)。但是这样做非常麻烦。

4、iframe直接引入音频

我们可以通过如下这样引入音频:

<iframe allow="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3"></iframe>

这样iframe加载完毕就会自动播放音频，不过他的缺点也很明显，很多操作都没办法做。这样的引入视频，视频只能播放一次就结束。想要他多次播放，则需要手动重置iframe的src来实现。

总结：

4种方式总结下来，3和4两种通过iframe的方法都可以实现，但又各有优缺点，第三种虽然使用起来相对复杂一些，但是优势在于我们可以利用js对视频做相关操作。第四种引入方式简单，但是对于可操作性几乎没有操作性可言。不过对于我要实现的消息通知的需求来说，第四种是最佳的实现方案。前两种方案由于并不友好，就不过多说了。我们可以根据各自的使用场景来决定那种方案更合适。

参考链接：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes