在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ vue 項目,ios上audio音頻 無法自動播放

vue 項目,ios上audio音頻 無法自動播放

spa頁面,初次進(jìn)入音樂播放界面的時候,在ios上無法自動播放,通過play()方法還是無法實現(xiàn)播放。有什么方法可以解決的

回答
編輯回答
陌璃

和vue沒有關(guān)系的,這是ios系統(tǒng)問題,音頻無法自動播放,可以監(jiān)聽document點擊事件播放,樓上已經(jīng)給出代碼了

2017年12月8日 00:21
編輯回答
青檸

我是這樣做的:

//--創(chuàng)建頁面監(jiān)聽,頁面加載完畢--觸發(fā)音頻播放
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var musicEle0 = document.getElementById('music_mp3_0');
        musicEle0.play();
    }
    audioAutoPlay();
});
//--創(chuàng)建觸摸監(jiān)聽,當(dāng)瀏覽器打開頁面時,觸摸屏幕觸發(fā)事件,進(jìn)行音頻播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var musicEle0 = document.getElementById('music_mp3_0');
            musicEle0.play();
    }
    audioAutoPlay();
});
2018年8月31日 09:32
編輯回答
礙你眼

最近在做個項目,需要js控制音頻播放,我的辦法是:
1、點擊等交互事件后,播放一個空白音頻。
audio.src='mute.mp3';
audio.play()
2、在需要js控制播放的地方,把音頻src改掉,就能直接調(diào)用audio.play()了。

說白了就是先通過點擊等交互事件播放空白音頻,播放過后就能通過JS控制了。

2017年5月5日 03:51
編輯回答
冷眸

有沒有遇到過樣式的問題?圖片描述

2017年7月29日 00:08
編輯回答
傲寒

移動端 無法自動播放音頻 視頻 是因為手機(jī)系統(tǒng)的問題,
你可以誘導(dǎo)用戶交互來觸發(fā)play事件

2018年5月14日 01:50
編輯回答
哚蕾咪

這個是ios系統(tǒng)的限制,ios系統(tǒng)基于安全考慮,是不允許自動播放audio和vedio的,之前用過一個簡單粗暴的方法,引用了微信的js-sdk,參考的偽代碼是

 function autoPlayAudio() {
        wx.config({
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            document.getElementById('music').play();
        });
    }
2018年5月4日 21:02
編輯回答
冷眸

這是ios的問題,模擬點擊即可,一樓代碼

2017年6月19日 13:34
編輯回答
逗婦乳
    <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay"  loop="loop">
<script type="text/javascript">
    // 音樂播放
    function autoPlayMusic() {
        // 自動播放音樂效果,解決瀏覽器或者APP自動播放問題
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);

        // 自動播放音樂效果,解決微信自動播放問題
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    function musicPlay(isPlay) {
        var audio = document.getElementById('musicid');
        if (isPlay && audio.paused) {
            audio.play();
        }
        if (!isPlay && !audio.paused) {
            audio.pause();
        }
    }
    autoPlayMusic();
</script>

具體可查看:
https://www.h5anli.com/articl...

2017年3月2日 01:20