解决APP嵌套H5页面时audio标签不能自动播放问题

应公司需求，微信公众号中写了一个节日推广活动，需求就类似于一个微场景统计，某年某月某日与用户发生了点什么....emmmmmm。

其中为了使氛围得到恰如其分的烘托，加入了音乐需求。

并且为了节约app开发工程师的开发资源，他们需要嵌套我这个H5页面。

那么问题来了~~这个页面在微信浏览器、安卓app中都能够自动播放音乐，但是在苹果app中就不能够自动播放。

 

So....看我如何解决，直接上代码~~~~~

 1 musicAutoplayIos () {
 2     wx.config({  // 微信配置信息
 3            debug: false,
 4            appId: "",
 5            timestamp: 1,
 6            nonceStr: "",
 7            signature: "",
 8            jsApiList: []
 9     })
10     wx.ready(function() {  
11            document.getElementById("audio").play();
12     });
13 }

声明完这个方法后，那么接下来我们就是去调用它

1 const oAudio = document.getElementById("audio"); // 必须原生获取
2 this.musicAutoplayIos(); // 兼容ios手机，微信浏览器写法
3 oAudio.play(); // 兼容安卓手机，微信浏览器写法

 

至此~~以上代码便能够兼容IOS手机，从而使audio标签在苹果app中也能够实现自动播放音乐的功能啦