[music player] gradient music player

by naocrrds

HTML

<div id="music-player">
<div id="section01">
<p>
<img src="https://dl.dropbox.com/s/88k53h07cfna8he/379DE4BE-1A02-4CB2-B008-ED444C1F8FA8.gif" id="startOrStopImg" alt="Play Button">
</p>
</div>
<div id="section02">
<p>Oh My God! by Girl’s Day</p>
</div>
</div>

<style>
#music-player {
position: absolute;
background: linear-gradient(#FF99B7 20%, white);
width: 6em;
height: 2em;
display: inline-flex;
border-radius: 0.875em;
padding: 0.125em;
transition-delay: 0.75s;
}

@keyframes marquee {
0% {
transform: translateX(100%);
}

100% {
transform: translateX(-100%);
}
}

#holder:hover #music-player {
transform: translate(-5.5em, 9em);
}

#section01, #section02 {
overflow: hidden;
white-space: nowrap;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

#section01 {
margin-right: 0.125em;
flex: 33%;
}

#section02 p {
transform: translateX(100%);
animation: marquee 6s linear infinite;
font-family: good-time;
letter-spacing: 0.1em;
}
                                
@keyframes rotating {
0% {
transform: rotate(0);
}

33% {
transform: rotate(-25deg);
}

66% {
transform: rotate(25deg);
}

100% {
transform: rotate(0);
}
}                     

#section02 {
flex: 66%;
}

#section01 img {
height: 1.5em;
}

#section01 img:hover {
animation: rotating 0.3s linear infinite;
}
</style>
                                
<script> 
document.getElementById("startOrStopImg").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/9yfgangqp2ahzor/yt1s.com%20-%20Oh%20My%20God.mp3"></audio>