wjsn.uwu.ai music player

<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&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<style>
#erm {
position: absolute;
bottom: 10px;
left: 40px;
right: 12px;
z-index: 999;
}

#musicplayer {
display: grid;
grid-template-columns: 30px auto;
align-items: center;
width: 100px;
font-size: 20px;
line-height: 140%;
border-radius: 10px;
background: white;
border: 1px solid black;
}

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

#musicpixel {
width: 100%;
padding: 5px;
position: relative;
min-height: 10px;
background: white;
border-radius: 10px 0 0 10px;
border-right: 1px solid black;
}

.overlay {
border-radius: 10px 0 0 10px;
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 {
font-size: 0.8em;
font-family: 'Mali', cursive;
display: inline-block;
padding-left: 100%;
animation: marquee 8s linear infinite;
}

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

100% {
transform: translate(-100%, 0);
}
}
</style>
<div id="erm">
<div id="musicplayer">
<div id="musicpixel">
<img src="https://gnome.crd.co/assets/images/foodsb/75e696bb.gif?v=130b639d">
<div class="overlay">
<div class="playpause">
<i class="fas fa-play"></i>
</div>
</div>
</div>
<div id="musictitle">
<span class="marquee">draggable on pc ~ now playing . . . um um um by nasom</span>
</div>
</div>
<audio id="musicsrc" loop="" src="https://dl.dropbox.com/s/hhh7pblbwt1ki8j/%C3%AB%C2%8A%C2%90%C3%AB%C2%82%C2%8C%C3%AC%C2%9D%C2%B4%20Um%20Um%20Um.mp3"></audio>
</div>
<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>
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("erm"));

function dragElement(elmnt) {
var pos1 = 0
, pos2 = 0
, pos3 = 0
, pos4 = 0;
if (document.getElementById(elmnt.id + "musicplayer")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "musicplayer").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}

function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}

function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}

function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>