0.基本配置
音乐图片百度云链接
密码: 8e8e
样式:
1.css内容
<style>
#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;
}
</style>
2.html内容
<!--音乐-->
<div class="video_exist play_yinfu" id="audio_btn" style="display: block;z-index:999999;">
<div id="yinfu" class="rotate"></div>
<audio preload="auto" autoplay="" id="media" src=""
autoplay preload loop="loop"></audio>
</div>
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());
});
});