html5-audio标签不能自动播放的坑！！！

应用是运行在公众号上的，一直在google浏览器调试，做播放audio时一开始出现了一个报错

Uncaught (in promise) DOMException

百度搜了下是google浏览器的问题，就一时不着急没处理他，后面这个问题提上了日程，真是整整浪费了一天时间来改这个问题！！！

先简单说下一些我收集整理到的一些原因和处理方式，我也用过部分（如下）

部分浏览器、微信浏览器、ios自带的浏览器不允许你自动播放audio，即使你通过生命周期代码触发play等事件都是不允许的，必须要你进行和浏览器进行事件互动，人为的点击，触摸等操作才能播放。经调研得知：最开始移动端浏览器是完全禁止音视频自动播放的，考虑到了手机的带宽以及对电池的消耗。但是后来又改了，因为浏览器厂商发现网页开发人员可能会使用 其他替代方案，而播放性能消耗更为糟糕，所以这样对用户反而是不利的。因此浏览器厂商放开了对多媒体自动播放的限制，只要具备以下条件就能自动播放：

1，没音频轨道，或者设置了 muted 属性
2，在视图里面是可见的，要插入到 DOM 里面并且不是 display: none 或者 visibility: hidden 的，没有滑出可视区域
换句话说，只要你不开声音扰民，且对用户可见，就让你自动播放，不需要你去使用 GIF 的方法进行 hack。这种实现主要对于视频的，自动播放但是却是静音的，需要你点击喇叭才能有声音，这对于音频答题就跟没说一样。

后面我通过查找发现了一个能够代替audio的，叫 AudioContext 但是！！！！虽然能代替，但是也有一些弊端，audiocontext需要用到文件流来实现播放，但是一些音频文件为了防止被其他地方请求下载是不做跨域处理的，所以不同域名的不能跨域请求，再就是这个AudioContext是跟手机静音有关系的，对比了下竞品，抱着我们也不能比他们差的心态，果断放弃了。

下面说一下绕了一圈坑后是如何填坑的：

抓了下竞品的接口，他们他们首次加载的时候有一个.mp3的请求，我们模仿着这么做了，app-create的时候也播放了一个有效但没声音的MP3文件，后面再次无交互执行播放audio时竟然还无效，瞬间又陷入沉思。

因为自动播放是从a页面到b页面后b页面请求接口成功后自动播放，我就想着在a页面请求数据，把数据带到b页面，因为a页面有点击操作，在这个点击操作中进行音频播放，但是也无效，当时以为是vue路由的原因，后面证实也不是。

有时候这个思路就是会陷入一个死循环中，跳不出来，后面可能一下子开窍了，我直接把没有声音的播放操作移到了a页面点击处，之前的操作不变，这样子就好了，其实好的莫名其妙！

而且我发现audio只要成功播放过一次，后面你不交互调用播放方法，也会自动播放，这也是让我不明白的地方