window.onload=function(){
   var music=document.getElementById("music");
   var audio=document.getElementsByTagName("audio")[0];

   //当音乐停止时光盘停止旋转
   audio.addEventListener("ended",function(event){
       music.setAttribute("class","");
       //music.style.animationPlayState="paused";
       //music.style.webkitAnimationPlayState="paused";
   },false);

   music.onclick=function(){
       if(audio.paused){
           audio.play()
       }else{
           audio.pause()
       }
   }

}
/*all tag*/
*{font-size: 1.5625vw;font-family: 微软雅黑;}
html,body{height: 100%;overflow: hidden;}/*music*/

.music{width: 15vw;height: 15vw;position: fixed;top: 3vh;right: 3vw;border: 4px solid #ef1639;z-index: 5;border-radius: 50%;}
.music img:first-of-type{ width: 79%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.music img:last-of-type{width: 28.421%;position: absolute;top: 24%;right: 2.5%;margin: auto;}
.play{-webkit-animation: music_disc 4s linear infinite;animation: music_disc 4s linear infinite;  }
@keyframes music_disc {0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);  } }
@-webkit-keyframes music_disc {0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);} }