audio-player.css

#audioplayer{
  width: 480px;
  height: 75px;
  margin: 50px auto auto auto;
  border: solid;
  text-align:center;
  background-color: rgba(5, 173, 13, 0.49);
}
 
#pButton{
  height:60px;
  width: 60px;
  border: none;
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  outline:none;
}
 
.play{background: url('Play_button.png') ;}
.pause{background: url('Pause_button.png') ;}
 
#timeline{
  width: 400px;
  height: 20px;
  margin-top: 20px;
  float: left;
  border-radius: 15px;
  border: black 1px solid;
  display: block;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
}
 
#playhead{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  background: rgba(0, 0, 0,1);
}
 
#volume_control{
  margin:auto;
  width:50%;
}
 
#rngVolume_label{
  vertical-align:middle;
}
 
#rngVolume{
  margin-top: 8px;vertical-align:middle;
}