微信h5页面audio标签在ios下不能自动播放

背景介绍:在一个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下音频没法自动播放