spin music icon player

<head>
<script src="https://kit.fontawesome.com/8119dfca45.js" crossorigin="anonymous"></script>
</head>

<style>

#music-player {
display: flex;
align-items: center;
justify-content: center;
}
#music-player {
height: 1em;
width: 1em;
font-size: 1.5em;
padding: 0.125em;
background: #C4D4FD;
border-radius: 50%;
background: -webkit-linear-gradient(-90deg, #fff 30%, #E8CDFF 70%, #C7AFC7 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow(0px 0px 1.5px #000);
-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"><i class="fas fa-music" style="font-size: .75em;"></i></div>

<audio id="audio" src="https://drive.google.com/uc?export=download&id=1w_GUyvPEEwIvmggJi1qSpvrR6W80ISJg"></audio>

<script>
document.getElementById("music-player").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
</script>