微信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下音頻沒法自動播放