JSFiddle - React, Tailwind, and code Playground

by Dörnesz Tamás

HTML

<audio src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-61905/zapsplat_multimedia_alert_chime_short_musical_notification_cute_child_like_001_64918.mp3?_=1" controls="true" class="audio-1"></audio>

CSS

body{
  
  background:black;
}
audio::-webkit-media{
  background-color: rgba(0,0,0,.1);
  border-radius: 5px;
  /*padding:0;*/
  margin:0;
}
audio::-webkit-media-controls-panel {
  background-color: rgba(0,0,0,.1);
  border-radius: 5px;
  /*padding:0;*/
  margin:0;
}
audio::-webkit-media-controls-current-time-display, 
audio::-webkit-media-controls-time-remaining-display {
  display:none;
}
audio::-webkit-media-controls-play-button {
  transform:scale(1.5);
  border-radius: 50%;
  color:red;
  background-color: pink;
}
audio::-webkit-media-controls-play-button:hover {
  background-color: white;
}
audio::-webkit-media-controls-volume-slider-container{
  display:block;
  
}
audio::-webkit-media-controls-volume-slider{
  display:block;
}