glenthemes music player 06

<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="//glenthemes.github.io/-music-/glenplayer06.js"></script>

<style>
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
   --Music-Player-Vinyl:#000;
   --Vinyl-Icon-Size:17px;
   --Vinyl-Spin-Speed:3.5s;
   --Music-Controls:#000;
   --Music-Controls-Size:12px;
   --Music-Title-Font-Size:11px;
   --Music-Title-Color:#000;
}
.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, .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:work sans;
   font-size:var(--Music-Title-Font-Size);
   color:var(--Music-Title-Color);
}
</style>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<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"></i></div>
   </div>
   <div class="music-title">MAMI MAMI ZONE</div>

   <audio id="audio" src="https://dl.dropbox.com/s/su8mergyk9lvhmb/mami-mami-zone.mp3" type="audio"></audio>
</div><!--pasta-->
</div><!--glenjams-06-->
<!----end music player---->

<script>feather.replace()</script>