Css3音乐~~偶尔听也好!

1607
.bgm-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background-size: 100%;
    background-image: url("http://s3img.city.sina.com.cn/activity/common/large/9f9acca088ab3e67f12eb612bdd12c07.png");
    z-index: 1;
    -webkit-animation: myrotate 5s linear 0s infinite normal;
}
.bgm-btn.mut{ background-position: 0px -30px; -webkit-animation: none;}
@-webkit-keyframes myrotate {
0% { -webkit-transform:rotate(0deg);}
25% { -webkit-transform:rotate(-90deg);}
50% { -webkit-transform:rotate(-180deg);}
75% { -webkit-transform:rotate(-270deg);}
100% { -webkit-transform:rotate(-360deg);}
}
<audio src="http://jiangsu.sinaimg.cn/zt/s/yxqxwspds/mobile/bgmcut.mp3" autoplay="autoplay" loop style="display: none; width: 0; height: 0;"></audio>
<div class="bgm-btn"></div>
<script type="text/javascript">
var firstTouch = true;
$('body').on("touchstart",function(e){
if ( firstTouch ) {
firstTouch = false;
document.getElementById('bgm').play();
}else{
return;
}
});
$(".bgm-btn").on("touchstart",function(e){  
//e.preventDefault();
//e.stopPropagation();
var dom = document.getElementById('bgm');
if( dom.paused ){
dom.play();
$(".bgm-btn").removeClass("mut");
}else{
dom.pause();
$(".bgm-btn").addClass("mut");
}
});
</script>