IOS的移动端audio自动播放（多种场景）

前言：为什么单说ios而不说安卓呢，因为ios的安全机制，把audio的canplay事件禁止了，导致了ios设备上自动播放功能不能简单的实现，需要用户点击一次才能播放。而安卓却没有这些问题，这也算是展现了两个系统的对于开放与安全的理解吧。
ios的audio标签在用户点击了一次之后才能播放，假如你的项目需要刚进页面就播放或者需要异步请求音频链接，那你肯定对这个ios的安全机制恨之入骨了。。。

这里贴一下安卓的自动播放：

document.getElementById('musicAudio').setAttribute('src', 'your.mp3')
document.getElementById('musicAudio').play()

注意事项：
- 1: html中的audio最好提前写好一个有效的mp3链接，防止某些ios版本会把audio标签当成无效标签给干掉
- 2: 对audio进行src赋值的时候，用document.getElementById(‘musicAudio’).setAttribute(‘src’, ‘your.mp3’)
-
-

ios场景1：进入页面时候进行自动播放

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载 AMD加载方法：

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

wx.config({
  debug: false,
   appId: data.appid,
   timestamp: data.timestamp,
   nonceStr: data.noncestr,
   signature: data.signature,
   jsApiList: []
 })
 wx.ready(function() {
   // 在微信的ready中进行播放 不管成功配置与否 都会执行ready
   document.getElementById('musicAudio').setAttribute('src', 'your.mp3')
   document.getElementById('musicAudio').play()
 })

ios场景2：进入页面后要异步请求音频文件，请求到后要进行播放

• 1: 先播放一次audio 然后暂停一次
• 2: 进行ajax异步请求
• 3：回调中对audio进行赋值
• 4：play

document.getElementById('musicAudio').play()
document.getElementById('musicAudio').pause()

this.$axios.post('/api/getmp3', params).then(({ data }) => {
    document.getElementById('musicAudio').setAttribute('src', 'your.mp3')
    document.getElementById('musicAudio').play()
}）
// 以上代码最好是放在一个点击事件里 当用户点击了之后开始执行，请求过程中应该有个loading让用户感知