<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;

    right: 4px;

    bottom: 40px;

    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, #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>