HTML, CSS and JavaScript playground

<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

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

.music-controls {
user-select:none;
-webkit-user-select:none;
width:22px;
font-size:16px;
cursor:pointer;
}

.playy, .pausee {
background: #FFC4DB;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke: 1px #d9d9d9;
font-size: 20px;
color: #ffffff;
}

.pausee {
display:none;
}

.sonata {
margin-left:-2;
margin-right:4px;
margin-bottom:0;
background: #FFC4DB;
border:1px solid #d9d9d9;
border-radius:90%;
color:white;
font-size: 11px;
padding-left:4.4px;
padding-right:4.4px;
padding-top:3.2px;
padding-bottom:3.2px;
}

.labeltext {
margin-bottom:0;
margin-left:3px;
background: #FFC4DB;
border:1px solid #d9d9d9;
border-radius:90%;
color:white;
font-size: 10px;
padding-left:3.7px;
padding-right:3.7px;
padding-top:3.6px;
padding-bottom:3.6px;
}

</style>
<body>

<div id="glenplayer02">
<div class="sonata"><i class="fas fa-bars"></i></div>
<div class="music-controls" onclick="songstart();">
<div class="playy" style="display: block;"><span><i class="fas fa-play-circle" aria-hidden="true"></i></span></div>
<div class="pausee" style="display: none;"><span><i class="fas fa-pause-circle" aria-hidden="true"></i></span></div></div>
<div class="labeltext"><i class="fas fa-volume-up"></i></div>
</div>