Audio CSS

gistfile1.txt

audioContainer: {
    height: '30px',
    overflow: 'hidden',
    backgroundColor: '#26476F',
    boxShadow: '0px 0px 5px 2px rgba( 0,0,0,0.55 )',
    borderRadius: '4px',
    color: '#ffffff',
  },

  audio: {
    filter: 'invert(100%)',
    // eslint-disable-next-line stylex/valid-styles
    '::-webkit-media-controls-enclosure': {
      backgroundColor: 'transparent',
      borderRadius: '0px !important',
      overflow: 'hidden',
    },

    // eslint-disable-next-line stylex/valid-styles
    '::-webkit-media-controls-panel': {
      height: '30px',
      margin: '0px',
      padding: '0px',
    },
  },
  
<div className={stylex(styles.audioContainer)}>
  <audio controls src={skyAudio[0]} className={stylex(styles.audio)}>
    <track></track>
  </audio>
</div>

https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F
https://stackoverflow.com/a/54744675/9529660
https://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag
https://blog.shahednasser.com/how-to-style-an-audio-element/#styling-the-control-panel