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);} }