修改HTML5中audio标签默认样式，美化audio标签样式，模仿微信音乐相册中音乐播放按钮带旋转。
整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 audio 样式修改 微信音乐相册音乐播放按钮</title>
<style type="text/css">
body{
background:#2b2938;
}
.btn-audio{
position:absolute;left:50%;top:50%;
width: 40px;
height: 40px;
background:url(music.png) no-repeat center bottom;
background-size:cover;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
</style>
</head>
<body>
<div class="btn-audio"><audio id="mp3Btn"><source src="http://p.erlyun.com/assets/data/mp3/ENFP.mp3" type="audio/mpeg" ></source></audio></div>
<script type="text/javascript" src="http://yuanmouren.erlyun.com/assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(function(){
//播放完毕
jQuery('#mp3Btn').on('ended', function() {
jQuery(".btn-audio").click();
});
//播放器控制
var audio = document.getElementById('mp3Btn');
audio.volume = .3;
jQuery('.btn-audio').click(function() {
event.stopPropagation();//防止冒泡
if(audio.paused){ //如果当前是暂停状态
jQuery(".btn-audio").addClass("Rotation");
audio.play(); //播放
return;
}else{//当前是播放状态
jQuery(".btn-audio").removeClass("Rotation");
audio.pause(); //暂停
}
});
});
</script>
</body>
</html>