0.基本配置
图片
music.gif
music_no.png
music_off.png
1.css内容
#audio_btn {
position: fixed;
right: 8px;
top: 0;
z-index: 200;
display: none;
width: 32px;
height: 32px;
background-repeat: no-repeat;
cursor: pointer;
}
.play_yinfu {
position: fixed;
right: 10px;
float: right;
top: 1px;
width: 30px;
height: 30px;
background-image: url("/images/music.gif");
background-repeat: no-repeat;
background-position: center center;
background-size: 60px 60px;
}
.rotate {
position: fixed;
right: 10px;
float: right;
top: 1px;
width: 30px;
height: 30px;
background-size: 100% 100%;
background-image: url("/images/music_off.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(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-moz-keyframes rotating {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
.off {
position: fixed;
right: 10px;
float: right;
top: 1px;
background-size: 100% 100%;
background-image: url("/images/music_no.png");
background-repeat: no-repeat;
background-position: center center;
}
2.html内容
autoplay preload loop="loop">
3.js代码function audioAutoPlay(id) {
var audio = document.getElementById(id);
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay('media');
$(function() {
var audio = $('#media');
audio[0].play();
$("#audio_btn").bind('click', function() {
$(this).hasClass("off") ? ($(this).addClass("play_yinfu").removeClass("off"), $("#yinfu").addClass("rotate"), $("#media")[0].play()) : ($(this).addClass("off").removeClass("play_yinfu"), $("#yinfu").removeClass("rotate"),
$("#media")[0].pause());
});
});
