hoyeon ju mp music player

<!-- ive left stuff blank so make sure to fill in each of ur hex codes colors as well as the pixel and song link, after all of that this music player will work!! -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali&display=swap" rel="stylesheet">

<style>

#musicplayer {
left: 1em;
bottom: -2.25em;
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 6.875em;
height: 2em;
line-height:140%;
background:#color;
border: 4px double #color;
border-radius: 0.875em;
}

#musicplayer > div {
border-radius: 0.875em;
}

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

#musicpixel {
width:100%;
position:relative;
min-height: 20px;
background:#color;
padding-left: 5px;
opacity: 1;
}

.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;
background:#color;
border-radius: 0.875em;
}

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

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

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

.playpause:hover{
cursor:help;
}

#musicpixel img{
display:block;
}

.marquee {
display: inline-block;
padding-left: 100%;
animation: marquee 3s linear infinite;
font-size:1em;
font-family: mali;
font-weight: 500;
font-size: 9.5px;
color: #textcolor;
}

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

50% {
transform: translate(-50%, 0);
}
100% {
transform: translate(-125%, 0);
}

</style>
</div>

<div id='musicplayer' style="position:absolute">

<div id='musicpixel'>

<img src='LINK' id='pixel'>
<div class='overlay'>
<div class='playpause'><i class="fas fa-play"></i></div>
</div>
</div>
<div id='musictitle'>
<span class='marquee'>song name by artist</span>
</div>
</script>

<audio id='musicsrc' loop src='LINK'></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>