cherry ju mp music player

<style>
#music-player {
height: 2.125em;
width: 2.125em;
border-radius: 50%;
border: 3px double black;
transition: all 0.35s ease;
background: #FF78BC;
display: inline-flex;
overflow: hidden;
align-items: center;
justify-content: left;
}

#music-player > div {
margin: 0.25em;
}

.pixel {
flex: 66%;
justify-content: left;
}

.note {
color: black;
font-size: 1.5em;
justify-content: center;
flex: 33%;
}

.note p {
transform: rotate(20deg);
}

#music-player:hover {
border: 3px solid #A80402;
width: 6.125em;
border-radius: 0.625em;
}
</style>

<body>

<div id="music-player">
<div class="pixel"> <img src="https://dl.dropbox.com/s/8utvn4n7itvjge9/F3D14112-AD68-427C-A757-0F0FEF6B073A.gif"> </div><div class="note"><p id="music-note">♪</p></div>
</div>

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

<audio id="audio" src="https://dl.dropbox.com/s/z1vhj5ecqxzrmso/yt1s.com%20-%20%EB%82%98%EC%9D%B8%EB%AE%A4%EC%A7%80%EC%8A%A49MUSES%20%EA%B1%B4GUN%20%EC%95%88%EB%AC%B4%EC%97%B0%EC%8A%B5%20%EC%98%81%EC%83%81%EA%B3%B5%EA%B0%9C.mp3"></audio>
</body>