关于IOS的audio的play不执行播放问题

一.点击播放
1.首先，苹果目前是屏蔽了javascript的audio的autoplay以及control的属性方式和play,paused。想要实现js的play或者paused的话。

官网给出的说明是必须要用户手动active点击才能播放audio(苹果为了安全和用户体验着想~.~)

所以这导致很多的前端开发人员搞音频播放类的项目很头疼，无法去做一些操作，比如默认播放某首音乐，或者做一些音乐相关的内容

2.其次，我在网上也搜了很多的相关文章，但是很多要不然就是很麻烦，要不然就是无法使用，完全就是无效，当然我不知道是不是我操作以及项目结构的问题，但是步骤是按照他们指示一步一步来的。算了废话也不多说，希望能够帮助到你们啦~

解决方案

一定要写在页面初始化的地方，否则无法生效

简单，方便。况且兼容率极大(iphone8-xr系列基本上都兼容)，在点击事件那里不需要.play()方法执行了，因为监听这里已经.play()了

iosJsPlay方法其中需要判断audio的src绑定的值有值才进入判断逻辑进行判断
还有一个坑就是全局应该只有一个audio标签，否则Safari个别版本会忽略其他的audio标签的播放内容只保存一个。所以建议全局或者页面只保留一个audio进行播放和暂停或者其他音频操作

记住，双向绑定的值也要清除，还需要audio标签绑定一个ref进行el清除它的src

 

 否则只会清除双向绑定的值无法清除页面el绑定的src的值。导致音频还在播放当中

 优化建议
 可以判断是否为ios内核，是的话才执行click事件的监听方法

二.进入播放
1.算是进入就播放背景音乐的那种页面吧
这个比较简单，直接引入=>  http://res.wx.qq.com/open/js/jweixin-1.2.0.js
vue安装和使用：

安装: npm install weixin-js-sdk –save
使用: var wx = require(‘weixin-js-sdk’)

//参数为空也没事，可以正常使用并且进入ready方法回调中的
wx.config({
  debug: false,
   appId: '',
   timestamp: '',
   nonceStr: '',
   signature: '',
   jsApiList: []
 })
 wx.ready(function() {
   // 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
   document.getElementById('musicAudio').setAttribute('src', 'your.mp3')
   document.getElementById('musicAudio').play()
 })

当然，如果你还有更好的方法可以在下方评论留言哦~...