成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端 h5 ios不能自動(dòng)播放音樂的問題：

verano / 2233人閱讀

摘要：如果我們想要在一個(gè)頁面自動(dòng)播放背景音樂或是其他音頻，比如是沒辦法調(diào)用事件直接調(diào)用，非得添加手動(dòng)點(diǎn)擊事件才可以。接下來就說說我在項(xiàng)目里遇到的困難和解決辦法情況我們知道安卓是可以直接調(diào)用音頻的事件的，不行。

如果我們想要在一個(gè)頁面自動(dòng)播放背景音樂或是其他音頻，比如ios是沒辦法調(diào)用audio.play()事件直接調(diào)用，非得添加手動(dòng)點(diǎn)擊事件才可以。接下來就說說我在項(xiàng)目里遇到的困難和解決辦法.
情況1、我們知道安卓是可以直接調(diào)用音頻的play事件的，ios不行。如是在多帶帶的h5頁面，無路由，這種情況就必須加個(gè)引導(dǎo)按鈕點(diǎn)擊它，或是在頁面全局設(shè)置一個(gè)點(diǎn)擊事件one，當(dāng)用戶第一次且僅第一次碰到頁面就播放。這里用vue距舉例：



methods: {
    playBgMusic () {
        let isiOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isiOS) this.bgMusic.play();
    }
}
mounted(){
      this.bgMusic = new Audio();
      this.bgMusic.loop = true;
      this.bgMusic.src = require("xxx.mp3");
      this.bgMusic.load();
      this.bgMusic.play();
}

情況2、如果是當(dāng)用戶使用hash或者有路由跳轉(zhuǎn)的情況，可以使用在跳轉(zhuǎn)頁添加全局audio對(duì)象的方式來控制。這里使用vue舉例：首先可在router/index.js里設(shè)置window.audio=null,在跳轉(zhuǎn)前的頁面new一個(gè)video 并將此對(duì)象賦予window.audio，然后即可在下一個(gè)頁面使用audio對(duì)象。代碼：

/*router/index.js*/
window.bgMusic=null;

/*跳轉(zhuǎn)頁面 router/beforeGo.js 跳轉(zhuǎn)事件*/
跳轉(zhuǎn)到自動(dòng)播放音樂的頁面

methods: {
    goTo () {
        const audio = new Audio();
        audio.addEventListener("canplay", () => {audio.play()});
        audio.loop = true;
        audio.src = mathBgVoice;
        audio.load();
        bgMusic = audio;
        this.$router.replace("自動(dòng)播放音樂的頁面路由")  
    }
}

情況3：如果你的業(yè)務(wù)主要是在微信上，那么可以使用以下代碼，可實(shí)現(xiàn)在微信瀏覽器中iOS和安卓設(shè)備中自動(dòng)播放音頻的效果：

var play = function() {
        document.removeEventListener("WeixinJSBridgeReady", play);
    document.removeEventListener("YixinJSBridgeReady", play);
    audioCtx.play();
};
document.addEventListener("WeixinJSBridgeReady",play, false);
document.addEventListener("YixinJSBridgeReady", play, false);

這樣處理以后，在跳轉(zhuǎn)頁面先尋找播放時(shí)機(jī)，等跳轉(zhuǎn)到播放音樂的頁面即可實(shí)現(xiàn)‘自動(dòng)播放背景音樂’的功能。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100301.html

相關(guān)文章

  • css前端初始化

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

    mikyou 評(píng)論0 收藏0

  • css前端初始化

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

    寵來也 評(píng)論0 收藏0

  • 「前端早讀君006」移動(dòng)開發(fā)必備：那些玩轉(zhuǎn)H5的小技巧

    摘要：今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。三動(dòng)畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動(dòng)畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識(shí)，度過擠地鐵坐公交的時(shí)光 今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗(yàn)demoshowImg(https://segmentfault.co...

    LittleLiByte 評(píng)論0 收藏0

  • 「前端早讀君006」移動(dòng)開發(fā)必備：那些玩轉(zhuǎn)H5的小技巧

    摘要：今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。三動(dòng)畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動(dòng)畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識(shí)，度過擠地鐵坐公交的時(shí)光 今日勵(lì)志語錄有志者自有千計(jì)萬計(jì)，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗(yàn)demoshowImg(https://segmentfault.co...

    liuyix 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<