spinning music note player

<style>

#music-player {
position: relative;
bottom: 1em;
left: 0em;
z-index: 9999;
height: 1.425em;
width: 1.425em;
font-size: 2em;
padding: 0.125em;
background: #C4D4FD;
border-radius: 50%;
background: radial-gradient( #EED1FF 0%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: .66px black;
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
#music-player:hover {
-webkit-animation: pop 0.3s ease;
}
</style>
<div id="music-player" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">♫</div>
<script>
document.getElementById("music-player").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
</script>
<audio id="audio" src="https://dl.dropbox.com/s/g0zod5d5bq00blx/IVE%20%27LOVE%20DIVE%27%20Lyrics%20%28%EC%95%84%EC%9D%B4%EB%B8%8C%20LOVE%20DIVE%20%EA%B0%80%EC%82%AC%29%20%28Color%20Coded%20Lyrics%29.mp3?dl=0"></audio>