style
body{
background: #ccc;
}
.music-pic{
display: inline-block;
width: 2rem /* 40/20 */;
height: 2rem /* 40/20 */;
overflow: hidden;
background: url('music_icon.png') no-repeat;
background-size: 100%;
-webkit-animation: reverseRotataZ 1.2s linear infinite;
position: absolute;
z-index: 999;
left: 82.53%;
top: 2.4%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*移动端,div点击瞬间,出现阴影问题*/
}
.music-pic.close{
display: inline-block;
width: 2rem /* 40/20 */;
height: 2rem /* 40/20 */;
overflow: hidden;
background: url('swiper_tip.png') no-repeat;
background-size: 100%;
-webkit-animation: none;
}
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}
html
<div class="music-pic">
<audio id="audio2" src="./Valentin - A Little Story.mp3" preload="auto" loop="loop" ></audio>
</div>
js
需要引入jq以及微信的js
<script src="./jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./jweixin-1.0.0.js"></script>
<script>
function autoPlayMusic() {
// 自动播放音乐效果,解决浏览器或者APP自动播放问题
function musicInBrowserHandler() {
musicPlay(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
// 自动播放音乐效果,解决微信自动播放问题
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var audio = document.getElementById('audio2');
if (isPlay && audio.paused) {
audio.play();
}
if (!isPlay && !audio.paused) {
audio.pause();
}
};
autoPlayMusic();
// 关闭音乐
$('.music-pic').click(function () {
if($('.music-pic').hasClass('close')){
document.getElementById("audio2").muted=false;
$('.music-pic').removeClass('close');
}else {
$('.music-pic').addClass('close');
document.getElementById("audio2").muted=true;
}
});