seokjin.drr.ac music player

HTML

<style>
/*With the emoji font below, you can choose emoji or fonts that can generate emojis! Changeee*/
  @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: 9px;
    top: 30px;
    z-index: 999999;
    height: 1.425em;
    width: 1.425em;
    font-size: 4em; /* Font size*/
    font-family: emoji;
    padding: 0.125em;
    background: #d5c3c2;
    border-radius: 50%;
    background: -webkit-linear-gradient(-90deg, #fff, #FACDE0, #FACDE0 50px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(0px 0px 2px #424242CF);
    -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">T</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://drive.google.com/uc?export=download&amp;id=1NWlK3S8rhb-erl94a6uwa7BGWOWIOVFi"></audio></div>