hueningz crd co music player

<style>
@font-face {
font-family: emoji;
src: url(https://dl.dropbox.com/s/cvba4kh6qm23mru/EmojiFont.ttf);
}

#emoji {
font-family: emoji;
}

#music-player {
display: flex;
align-items: center;
justify-content: center;
}

#music-player {
position: absolute;
left: 4.7em;
bottom: -12px;
z-index: 999999;
height: 1.425em;
width: 1.425em;
font-size: 2.25em;
font-family: emoji;
padding: 0.125em;
background: #d5c3c2;
border-radius: 50%;
background: -webkit-linear-gradient(-90deg, #fff, #4d8d36
, #ADACAC 50px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow(0px 0px 2px #424242);
-webkit-animation: spin 2s linear infinite;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}

@media only screen and (max-width: 600px) {
#music-player {
bottom: -10px;
}
}

@-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">B</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/scl/fi/o5jj4akcrr6mbsoyz57vl/03-fall-at-the-same-time.mp3?rlkey=u9t472lb0hq6a6aegltjwwq80&dl=0.mp3"></audio></div>