解决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中也能够实现自动播放音乐的功能啦