背景引见:在一个h5页面中,当用户提交表单到背景,背景返回的效果胜利的话,最先自动播放背景音乐

   涌现的题目:在安卓手机上一般,iOS中没有反应

厥后网上一番搜刮后相识到时由于iOS不允许自动播放音乐,除非用户做出了交互行动

处理方案:
1.假如是在页面刚加载就须要自动播放音频的话照样比较好办的,能够应用微信供应的api来完成(应该是内部做了一些修正)

 // 经由过程config接口注入权限考证设置后, 在 ready 中 play 一下 audio
    function autoPlayAudio1() {
        wx.config({
            // 设置信息, 纵然不准确也能运用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            document.getElementById('bgmusic').play();
        });
    }

参考:在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的准确体式格局

2.须要在某个特定的机遇才播放背景音乐

既然iOS做了限定,那只能经由过程与用户举行交互完成,应用给html增加touchstart事宜在回调函数中播放就能够了,须要注重的是:

这里不能同经由过程jquery的trigger触发,要获得用户实在的交互才会相应,由于只须要触摸一次就能够了,所以能够用one要领注册事宜

                        audio.play(); //安卓手机能够直接播放
                    // 为iOS做兼容,为了保险起见,触摸事宜都给他加上
                        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                            var noPlay = true;
                            $('html').one('touchstart',function(){
                                if(noPlay) {
                                audio.play();
                                noPlay = false;
                                }
                            })
                            $('html').one('touchmove',function(){
                                if(noPlay) {
                                audio.play();
                                noPlay = false;
                                }
                            })
                            $('html').one('touchend',function(){
                                if(noPlay) {
                                audio.play();
                                noPlay = false;
                                }
                            })

到这里背景音乐已能够播放了,然则关于用户体验不够好,假如我不触摸页面的话照样不会播放,假如你有更好的方法,能够加我QQ:32319149 一同议论啊:)

参考文章:

H5案例分享：处理H5中背景音乐没法自动播放题目
处理iOS下音频没法自动播放