JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id="customAudioPlayer">
  <button id="playButton">Play</button>
  <audio id="myAudio" src="your-audio-file.mp3"></audio>
</div>

CSS

/* Hide the default controls */
#myAudio::-webkit-media-controls {
  display: none !important;
}

/* Show a custom controls panel */
#myAudio::-webkit-media-controls-panel {
  display: flex !important;
  justify-content: center !important;
}

/* Show only the play button */
#myAudio::-webkit-media-controls-play-button {
  display: block !important;
}

/* Hide all other specific controls */
#myAudio::-webkit-media-controls-timeline,
#myAudio::-webkit-media-controls-current-time-display,
#myAudio::-webkit-media-controls-time-remaining-display,
#myAudio::-webkit-media-controls-mute-button,
#myAudio::-webkit-media-controls-volume-slider,
#myAudio::-webkit-media-controls-fullscreen-button,
#myAudio::-webkit-media-controls-seek-back-button,
#myAudio::-webkit-media-controls-seek-forward-button,
#myAudio::-webkit-media-controls-rewind-button,
#myAudio::-webkit-media-controls-return-to-realtime-button,
#myAudio::-webkit-media-controls-toggle-closed-captions-button,
#myAudio::-webkit-media-controls-toggle-pip-button,
#myAudio::-webkit-media-controls-speed-button {
  display: none !important;
}