music player

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Short+Stack" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>
<style>
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
 --Circle-Size:38px;
 --Progress-Border-Size:2px;
 --Progress-Empty:#ff9cd9;
 --Progress-Fill:#ff9cd9;
 --Player-Background:#ffffff;
 --Play-Pause-Buttons-Size:23px;
 --Play-Pause-Buttons-Color:#111;
 --Player-Text-Margin:19px;

 --Song-Name-Font-Size:29px;
 --Song-Name-Color:#000000;

 --Artist-Name-Font-Size:22px;
 --Artist-Name-Color:#000000;
}

#glenplayer07 {
 position:fixed;
 bottom:0;margin-bottom:30px;
 left:0;margin-left:30px;
 z-index:99;
}

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

.circleofdeath {
 width:var(--Circle-Size);
 height:var(--Circle-Size);
 border-radius:100%;
 overflow:hidden;
}

.tinfoil {
 width:var(--Circle-Size);
 height:var(--Circle-Size);
 background:var(--Progress-Empty);
 border-radius:100%;
}

.oven {
 background:var(--Progress-Fill);
}

.oliveoil {
 width:100%;
 height:100%;
}

.crust {
 position:absolute;
 top:0;
 display:flex;
 align-items:center;
 justify-content:center;
 width:var(--Circle-Size);
 height:var(--Circle-Size);
}

.cherry {
 display:flex;
 align-items:center;
 justify-content:center;
 width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
 height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
 background:var(--Player-Background);
 border-radius:100%;
 cursor:pointer;
 z-index:1;
}

.music-controls {display:flex;align-items:center}

.music-controls .material-icons {
 font-size:var(--Play-Pause-Buttons-Size);
 color:var(--Play-Pause-Buttons-Color);
}

.pausee {display:none;}

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

.music-info {
 margin-left:var(--Player-Text-Margin);
 line-height:1em;
}

.song-name {
 font-family:short-stack;
 font-size:var(--Song-Name-Font-Size);
 letter-spacing:1.5px;
 color:var(--Song-Name-Color);
}

.artist-name {
 margin-top:3px;
 font-family:short-stack;
 font-size:var(--Artist-Name-Font-Size);
 letter-spacing:0.3px;
 color:var(--Artist-Name-Color);
}
</style>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer07">
 <div class="flamingo">
 <div class="circleofdeath">
 <div class="tinfoil">
 <div class="oliveoil"></div>
 </div>
 <div class="crust">
 <div class="cherry">
 <div class="music-controls">
 <i class="material-icons playy">play_arrow</i>
 <i class="material-icons pausee">pause</i>
 </div>
 </div><!--cherry-->
 </div><!--crust-->
 </div><!--circleofdeath-->

 <div class="music-info">
 <div class="song-name">my axe</div>
 <div class="artist-name"></div>
 </div><!--music-info-->
 </div><!--flamingo-->
</div><!--glenplayer07-->

<audio id="audio" src="https://dl.dropbox.com/s/38txyvg2zc17d36/my%20axe%20-%20faesinth%20%28full%20ver%29.mp3?dl=0" type="audio"></audio>
<!----end music player---->