icie music player


<head>
<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: 200px;

font-size:20px;
line-height:140%;

background:white;

border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;

}

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

#musicpixel{
width:100%;
padding:5px;
position:relative;

min-height: 20px;

border-right: 0px solid black;
}


.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: 1;
transition:0.3s ease;
}

.playpause{
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;
}

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


</style>

<div id='musicplayer'>
    <div id='musicpixel'>
        <img src='https://imgur.com/qXO3vK5.png' width="20" height="20">
        <div class='overlay'>
            <div class='playpause'><i class="fas fa-play"></i></div>
        </div>
    </div>
    <div id='musictitle'>
        <span class='marquee'>cr icie</span>
    </div>
</div>

<audio id='musicsrc' loop src='https://dl.dropbox.com/s/k84dustfa8m32jw/slchld_-_twenty_four_hours_Officia_%28getmp3.pro%29.mp3?dl=0'></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>