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让用户感知