lobilles tut music player

<head>
<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=M+PLUS+Rounded+1c:wght@400;500;800&display=swap" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<script src="https://kit.fontawesome.com/8119dfca45.js" crossorigin="anonymous"></script>

</head>

<style type="text/css">

@font-face {
font-family: 'music';
src: url(https://dl.dropbox.com/scl/fi/4a80v3j0jm1meuf2pib3w/Font-90-Icons.ttf?rlkey=5wdviaocq8i7deg42zyhct3tz&st=p36edskc);
}

@font-face {
font-family: Pixelated MS Sans Serif;
src:url(ms_sans_serif.woff) format("woff");
src:url(ms_sans_serif.woff2) format("woff2");
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position: relative;
bottom: 0;
margin-bottom: 0;
left: 0;
margin-left: -0.3em;
display: flex;
background: #C0C0C0;
padding: 5px 3px 1px 4px;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 0px #dfdfdf;
width: auto;
}

@media only screen and (max-width: 600px) {
#glenplayer02 {
margin-left: -0.8em;
padding: 4px 0px 3px 3px;
}
}

#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:13px;
cursor:pointer;
font-family: 'music';
margin-left: 0.5em;
}

.playy, .pausee {font-family: 'music'; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em;} /* color of play & pause buttons */

@media only screen and (max-width: 600px) {
.playy, .pausee {
font-size: 1em;
}
}

.pausee {display:none;}

.sonata {
margin-left:0.6em;
font-family: Pixelated MS Sans Serif;
font-size:0.9em;
color:#000; /* color of music note symbol */
}

@media only screen and (max-width: 600px) {
.sonata {
margin-left: 0.4em;
font-size: 0.85em;
}
}

.labeltext {
margin-left:0.5em;
position: relative;
bottom:0.1em;
font-size:16px;/* color of song title */
}

@media only screen and (max-width: 600px) {
.labeltext {
font-size: 15px;
margin-left: 0.2em;
}
}
</style>
<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">D</div>
<div class="pausee">C</div>
</div>
<div class="sonata">MP3 </div>
<div class="labeltext"><img src="https://64.media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"> <span style="font-family: 'music'; font-size: 1em; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; ">Z</span></div>
</div><!--end music player-->

<audio id="tune" src="https://dl.dropbox.com/scl/fi/j8kp90fluax7s6m5z1gvq/.mp3?rlkey=sqko3qhtogveire60h8jalstd&st=ahcpbnvh"></audio>
</body>