微信h5頁面audio標簽在ios下不能自動播放

jlanglang 發布于2019-08-26 11:49 / 2777人閱讀

摘要：背景介紹在一個頁面中當用戶提交表單到后臺后臺返回的結果成功的話開始自動播放背景音樂出現的問題在安卓手機上正常中沒有反應后來網上一番搜索后了解到時因為不允許自動播放音樂除非用戶做出了交互行為解決方案如果是在頁面剛加載就需要自動播放音頻的話還是

背景介紹:在一個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下音頻無法自動播放

GPU云服務器云服務器 h5頁面視頻自動播放 h5同層視頻播放模式下 webrtc不能自動播放微信內h5頁面打開小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107649.html

微信h5頁面audio標簽在ios下不能自動播放

摘要：背景介紹在一個頁面中當用戶提交表單到后臺后臺返回的結果成功的話開始自動播放背景音樂出現的問題在安卓手機上正常中沒有反應后來網上一番搜索后了解到時因為不允許自動播放音樂除非用戶做出了交互行為解決方案如果是在頁面剛加載就需要自動播放音頻的話還是背景介紹:在一個h5頁面中,當用戶提交表單到后臺,后臺返回的結果成功的話,開始自動播放背景音樂出現的問題:在安卓手機上正常,iOS中沒有反...

jsliang 2019-08-01 18:42 評論0 收藏0
移動端H5開發遇到的坑

摘要：微信分享簽名錯誤單頁應用模式下微信分享一直提示簽名錯誤按照微信官網文檔，已經引入，正確的配置安全域名，后臺開發人員生成的簽名也通過微信簽名工具驗證，但是前端的自定義分享一直報簽名錯誤，沒有辦法自定義分享，如果確保了哪些基本配置沒有問題，并且微信分享簽名錯誤invalid signature vue單頁應用history模式下微信分享一直提示簽名錯誤invalid signature ...

Eirunye 2019-08-26 13:39 評論0 收藏0
css前端初始化

摘要：初入前端，若有不足歡迎指正頭部初始化標簽問題一般要添加背景音樂的話，我們的第一反應就是使用標簽，但是這里有一個坑。前言當下移動端橫行，平常我們做一些移動端的項目，接觸最多的就是H5，雖然做移動端不用兼容IE，但是我們要兼容微信、app、ios、android... 今天就給寫幾個平常開發經常會遇到的問題以及解決辦法。初入前端，若有不足歡迎指正！頭部初始化 ...

mikyou 2019-08-29 16:19 評論0 收藏0
css前端初始化

摘要：初入前端，若有不足歡迎指正頭部初始化標簽問題一般要添加背景音樂的話，我們的第一反應就是使用標簽，但是這里有一個坑。前言當下移動端橫行，平常我們做一些移動端的項目，接觸最多的就是H5，雖然做移動端不用兼容IE，但是我們要兼容微信、app、ios、android... 今天就給寫幾個平常開發經常會遇到的問題以及解決辦法。初入前端，若有不足歡迎指正！頭部初始化 ...

寵來也 2019-08-02 11:09 評論0 收藏0