【兼容问题】ios不能自动播放音频

【兼容问题】ios不能自动播放音频

一般网页里自动播放音频的代码如下

<audio src="/music/BGM.mp3" autoplay ></audio>

问题：但是ios的机制导致这一属性无法产生效果，必须手动点击已经渲染出来的DOM才可以播放。

PS:无论是直接写DOM，还是用js生成都无法触发自动播放，连加载完成的监听属性也封锁了，因此也无法监听音频文件是否加载完成，

解决思路：按着ios的安全机制，必须要点击音频的DOM,那么我们就去用JS产生点击这个操作

借助工具：微信JS SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

将以上代码写入文件，vue项目放入/public/index.html文件里的head里

用法

1.直接自动播放

wx.config({
   ...});//微信jssdk注册
wx.ready(function () {
   
     let Audio = this.$ref.Audio//这里是vue写法，返回的是音频的dom
     Audio.play()//这里就可以播放了
})

2.预加载音频文件
有时候为了用户体验，必须预加载音频文件（音频文件一般比较大，加载过慢，会导致点击和播放之间的时间差，需要预先加载）

wx.config({
   ...});//微信jssdk注册
 wx.ready(function () {
   
    let Audio = new Audio();
    Audio.ref='/music/BGM.mp3'
    Audio.muted = true;//静音
    Audio.play();//播放
    Audio.pause();//暂停
    Audio.muted = false;//取消静音
})

PS：在实际测试中，会听到一段音频（播放和暂停之间有空隙，iphone8里差不多实测1s左右），因此在播放前将音频静音，暂停后取消静音