说明：safari下初始化按钮显示‘正在播放’，但并没有声音，当用户触摸到屏幕时，声音才播放。若用户一次触摸屏幕就是按钮位置，则按钮显示‘停止播放了’，这时没有背景音乐；再点一次，按钮显示‘正在播放’，同时播放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body>
<audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop></audio>
<button id='status' onclick='triggerBgMusic()'>播放按钮</button>
<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='正在播放';
}else{
audio.pause();
sessionStorage.bgmusic='pause';
document.getElementById('status').innerHTML='停止播放了';
}
}
</script>
</body>
</html>
网友评论