H5场景自动播放音乐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style>
#audio_btn {
width: 30px;
height: 30px;
background-image: url(__MOOTH__/image/musicpause.png);
background-size: contain;
}
#audio_btn.rotate {
background-image: url(__MOOTH__/image/music.png);
-webkit-animation: rotating 1.2s linear infinite;
-moz-animation: rotating 1.2s linear infinite;
-o-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite
}
@-webkit-keyframes rotating {
from { -webkit-transform: rotate(0) }
to { -webkit-transform: rotate(360deg) }
}
@keyframes rotating {
from { transform: rotate(0) }
to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
from { -moz-transform: rotate(0) }
to { -moz-transform: rotate(360deg) }
}
</style>
<body>
<div id="audio_btn" class="rotate">
<audio id="music" preload="auto" src="MP3/1.mp3" autoplay="autoplay" loop="loop"></audio> </div>
<script type="text/javascript">
var c = document.getElementById("music");
c.src = "MP3/1.mp3";
c.play();
//处理微信的时候
document.addEventListener("WeixinJSBridgeReady", function() {
if(typeof WeixinJSBridge == "object") {
WeixinJSBridge.invoke("getNetworkType", {}, function(j) {
c.play();
})
}
});
$(function(){
$("#audio_btn").click(function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
//控制背景音乐 播放或暂停
if($(this).hasClass("rotate")){
x.play();
}else{
x.pause();
}
})
});
</script>
</body>
</html>
