music player w/ marquee & pixel

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch.umd.js"></script><head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous"></head>

<style>
#musicplayer {
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 130px;
font-size: 12px;
color:#955136;
line-height:140%;
border: 2px solid #FF8FB9;
border-radius: 2px;
background:white;
-webkit-filter: drop-shadow(0px 0px 3px rgba(255, 199, 232, 0.8));
}

#musictitle{
font-family:handy;
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
}

#musicpixel{
width:120%;
paddin-top:0px;
position:relative;
min-height: 15px;
background:white;
border-right: 2px solid #FF8FB9;
}

.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;
background:white;
}

#musicplayer:hover .overlay {
opacity: 0;
transition:0.3s ease;
}

.playpause{
padding:5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.playpause:hover{ cursor:help; }

#musicpixel img{ display:block; }

.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
font-family: hearts;
color: #994e6c;

}

@keyframes marquee{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}

</style><div id='musicplayer'><div id='musicpixel'><img src='https://media.discordapp.net/attachments/903364339464044575/1087693660558196816/IMG_9555.gif'>

<div class='overlay'><div class='playpause'><i class="fas fa-play"></i>

</div></div></div><div id='musictitle'><span class='marquee'> honeymoon un deux trois - DATEKEN </span></div></div>

<audio id='musicsrc' loop src='https://files.catbox.moe/scgi2w.mp3'></audio>

<script>
document.querySelector('.playpause').addEventListener('click', playpause);

function playpause(){
if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
document.querySelector('#musicsrc').play();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
} else{
document.querySelector('#musicsrc').pause();
document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
}

}
</script>