🪀 crd tuto: music player embed

<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: 1.425em;
width: 1.425em;
font-size: 1.5em;
padding: 0.125em;
border-radius: 50%;
border: 1px solid #FFFFFF;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,209,235,1) 100%);
-webkit-filter: drop-shadow(0px 0px 1.5px #FF95CD);
position: absolute;
bottom: 0.5em;
left: 0.5em;
-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-headphones"style="font-size: .7em;color: #FFFFFF;-webkit-text-stroke: 0.5px #FFD1EB;"></i></div><audio id="audio" src="https://cdn.discordapp.com/attachments/925397547990798380/1064539887124099173/Baby_Blues.mp3"></audio>

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