微信H5页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<style>
.music{
position: absolute;
top: 0.5rem;
right: 0.3rem;
width: 0.8rem;
height: 0.8rem;
}
.music_stop{
display: none;
}
#audio,#status{
opacity: 0;
position: absolute;
top: 0.5rem;
right: 0.3rem;
z-index: 999;
height: 0.8rem;
display: block;
width: 0.8rem;
}
</style>
<body>
<audio id='audio' autoplay="autoplay" src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop></audio>
<button id='status' onclick='triggerBgMusic()'></button>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3321905628,1991297823&fm=26&gp=0.jpg" class="music music_start">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=444902375,1933902914&fm=26&gp=0.jpg" class="music music_stop">
</body>
<script>
//----------页面初始化------------
var audio = document.getElementById('audio');
if (sessionStorage.bgmusic == 'pause') {
playBgMusic(false);
} else {
playBgMusic(true);
//----------处理自动播放------------
//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
playBgMusic(true);
document.addEventListener("WeixinJSBridgeReady", function () {
playBgMusic(true);
}, false);
}
audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
function audioAutoPlay() {
playBgMusic(true);
document.removeEventListener('touchstart', audioAutoPlay);
}
document.addEventListener('touchstart', audioAutoPlay);
}
//----------处理页面激活------------
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 () {
if (!document[hiddenProperty]) {
if (!sessionStorage.bgmusic || sessionStorage.bgmusic == 'play') {
audio.play();
}
} else {
audio.pause();
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
//---------背景音乐开关----------
function triggerBgMusic() {
if (!sessionStorage.bgmusic || sessionStorage.bgmusic == 'play') {
playBgMusic(false);
} else {
playBgMusic(true);
}
}
//---------音乐播放和暂停----------
function playBgMusic(val) {
if (val) {
audio.play();
sessionStorage.bgmusic = 'play';
document.getElementById('status').innerHTML = '正在播放';
$(".music_stop").css("display","none")
$(".music_start").css("display","block")
} else {
audio.pause();
sessionStorage.bgmusic = 'pause';
document.getElementById('status').innerHTML = '停止播放了';
$(".music_start").css("display","none")
$(".music_stop").css("display","block")
}
}
</script>
</body>
</html>
![一个小小的移动web版音乐播放器[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)