<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);
}