js代码：
//音乐
function music(){
var oMusic=document.getElementById("music");
var Audio=document.getElementsByTagName("audio")[0];
Audio.addEventListener("ended",function(event){
oMusic.setAttribute("src","///common/0315/zSmusicCloase_03.png");
},false);
// 兼容 ios系统 微信
if(typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function"){
Audio.play();
}else{
/*监听客户端抛事件 WeixinJSBridgeReady*/
if(document.addEventListener){
document.addEventListener("WeixinJSBridgeReady", function(){
Audio.play();
}, false);
}else if(document.attachEvent){
document.attachEvent("WeixinJSBridgeReady", function(){
Audio.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
Audio.play();
});
}
}
// 兼容safari
var voiceStatu = true;
document.addEventListener("touchstart",function(e){
if(voiceStatu){
Audio.play();
voiceStatu = false;
}
}, false);
oMusic.addEventListener("touchend",function(event){
if(Audio.paused){
Audio.play();
this.setAttribute("class","play");
this.setAttribute("src","///common/0315/zSmusic_03.png");
}else{
Audio.pause();
this.setAttribute("class","");
this.setAttribute("src","///common/0315/zSmusicCloase_03.png");
}
},false);
}
html结构：
css样式：
#music{
width: 0.61rem;
height: 0.6rem;
position: absolute;
left: 6.7rem;
top: 0.77rem;
position: fixed;
z-index: 999;
}
#music.play {
-webkit-animation: music 4s linear infinite;
animation: music 4s linear infinite;
}
@keyframes{
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
