music player

<head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

<script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="https://dl.dropbox.com/s/vyffmps0ly6ikf4/glenplayer06.js"></script>

<style type="text/css">

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
--Music-Player-Vinyl:#fff;
--Vinyl-Icon-Size:22px;
--Vinyl-Spin-Speed:2.5s;
--Music-Controls:#fff;
--Music-Controls-Size:16px;
--Music-Title-Font-Size:14px;
--Music-Title-Color:#fff;
}
.glenjams-06 {
display:none;
position:fixed;
bottom:0;margin-bottom:30px;
left:0;margin-left:30px;
z-index:99;
}

.pasta {
display:flex;
align-items:center;
}

.vinyl-spin {
animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
}

.vinyl-pause {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
}

@-webkit-keyframes recordspin {
from {
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}

@keyframes recordspin {
from {
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}

.vinyl svg {
width:var(--Vinyl-Icon-Size);
height:var(--Vinyl-Icon-Size);
}

.music-controls {
margin-left:10px;
width:var(--Music-Controls-Size);
overflow:hidden;
cursor:pointer;
}

.music-controls svg {
width:var(--Music-Controls-Size);
height:var(--Music-Controls-Size);
color:var(--Music-Controls);
stroke-width:1.5px;
}

.pausee {display:none;}

.beff {display:none;}
.aff {display:block;}

.music-title {
margin-left:8px;
font-family:times new roman;
font-size:var(--Music-Title-Font-Size);
color:var(--Music-Title-Color);
}
</style>
</head>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<!-------hide in body top------->
<div class="glenjams-06">
<div class="pasta">
<div class="vinyl"></div>
<div class="music-controls">
<div class="playy"><i data-feather="play"></i></div>
<div class="pausee"><i data-feather="pause">"HOSPITAL HALLS"</i></div>
</div>
<div class="music-title"></div>

<audio id="audio" src="https://www.dl.dropboxusercontent.com/s//gs0w3nhpw09wfie/Yume%202kki%20OST%20-%20The%20Ceiling%20%28Reversed%20%26%20Extended%29.mp3?dl=0" type="audio"></audio>
</div><!--pasta-->
</div><!--glenjams-06-->
<!----end music player---->
<script>feather.replace()</script>

</body>