image circle music player

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player</title>
    <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: 3px dotted #ADE096;
            background: #FFB3C7;
            position: relative;
            bottom: -1em;
            right: 0em;
            z-index: 1200;
            -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>
</head>
<body>
    <div id="music-player">
        <img src="https://64.media.tumblr.com/tumblr_lkl5htNQtn1qfamg6.gif">
    </div>
    <audio id="audio" src="https://dl.dropbox.com/s/s8caa4op3ksf7v0/%C3%81ngel%20%28Once%20in%20Your%20Lifetime%29.mp3"></audio>
    <script>
        document.getElementById("music-player").onclick = function() {
            var audio = document.getElementById("audio");
            if (audio.paused) audio.play();
            else audio.pause();
        };
    </script>
</body>
</html>