在做H5页面的时候，经常会需要用到背景音乐，比如电子贺卡、动态音乐相册等，右上角有个360°旋转的音乐图标，点击可以控制音乐是否播放，那这个效果是如何实现的呢？
我现整理了一下代码：
Demo
点击Icon暂停，再次点击继续。
HTML代码如下：
<div id="audio_btn" class="rotate">
<audio loop src="bg_audio.mp3" id="media" autoplay="" preload=""></audio>
</div>
CSS代码如下：
#audio_btn {
width: 30px;
height: 30px;
background-image: url(normalmusic.svg);
background-size: contain;
}
.rotate {
-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(0) }
to { -webkit-transform: rotate(360deg) }
}
@keyframes rotating {
from { transform: rotate(0) }
to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
from { -moz-transform: rotate(0) }
to { -moz-transform: rotate(360deg) }
}
使用了Keyframes 结合 transfrom 来实现CSS 360°旋转效果。
（我的另一篇关于keyframes文章 http://www.cnblogs.com/shizq/p/5063610.html）
JS代码如下：
1. 实现点击图标，旋转暂停，再点击再旋转
$("#audio_btn").click(function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
})
2. 图片暂停的同时，实现背景音乐也暂停，图片旋转的时候，音乐也继续播放。
结合上面的代码，修改如下：
var x = document.getElementById("media");
$(function(){
$("#audio_btn").click(function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
//控制背景音乐 播放或暂停
if($(this).hasClass("rotate")){
x.play();
}else{
x.pause();
}
})
});
因为H5的audio/video自带pause()和play()的方法，我们直接调用就可以了。但需要注意的是，它不是jquery的方法，如果直接写成$(audio_btn).find("audio").pause()，是无效的。所以要用原生JS DOM来写。