微信安卓、IOS前端页面音频后台切换播放问题

最新推荐文章于 2022-07-08 10:36:35 发布

qq_22266149

最新推荐文章于 2022-07-08 10:36:35 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/qq_22266149/article/details/89144113

版权

<body>
        <audio src="" id="bgAudio" loop preload='auto'></audio>

        <div class="ui-music" onclick="bgMusicPlayOrPause('bgAudio')"></div>

</body>



//添加判断是否切到后台

var playFlag = true;
var clickMusicBtn = false;
function addVisibleListener(){
    var hiddenProperty = 'hidden' in document ? 'hidden' :  'webkitHidden' in document ? 'webkitHidden' :  'mozHidden' in document ? 'mozHidden' :  null;   
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    var onVisibilityChange = function()
    {
        ui_switchMusic();        
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
}

//切面点击关闭、开启音乐按钮，判断当前状态进行选择音乐开启和关闭

function ui_switchMusic(){
    if(clickMusicBtn){
        if(playFlag){
            bgAudio.play();
            playFlag = true;
        }else{
            bgAudio.pause();
            playFlag = false;
        }
    }else{
        if(playFlag){
            bgAudio.pause();
            playFlag = false;
        }else{
            bgAudio.play();
            playFlag = true;
        }
    }
}

//点击关闭、开启按钮触发方法
function bgMusicPlayOrPause(id) {
    clickMusicBtn = !clickMusicBtn;
    if (playFlag) {
        audioPause(id);
        $(".ui-music").css("background-image", 'url("img/closeMusic.png")')
        playFlag = false;
    } else {
        audioAutoPlay(id);
        $(".ui-music").css("background-image", 'url("img/openMusic.png")')
        playFlag = true;
    }
}

//暂停音乐播放
function audioPause(id) {
    var audio = document.getElementById(id);
    audio.pause();
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio.pause();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function () {
        audio.pause();
    }, false);
}

//开启音乐播放
function audioAutoPlay(id) {
    var audio = document.getElementById(id);
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function () {
        audio.play();
    }, false);
}
//播放与暂停对应音乐
function sceneMusic(path){
	if(!clickMusicBtn){
		bgAudio = $("#bgAudio")[0];
		bgAudio.src = path;
		bgAudio.load();
		bgAudio.currentTime = 0;
		bgAudio.play();
	}else{
		bgAudio = $("#bgAudio")[0];
		bgAudio.src = path;
		bgAudio.load();
		bgAudio.currentTime = 0;
		bgAudio.pause();
	}
}

qq_22266149

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信安卓、IOS前端页面音频后台切换播放问题

<body> <audio src="" id="bgAudio" loop preload='auto'></audio> <div class="ui-music" onclick="bgMusicPlayOrPause('bgAudio')"></div></body>//...
复制链接

扫一扫