html 5 audio tag lower width won't show play button in chrome

Question

I want to use HTML 5 audio tag for both chrome and firefox:

      <audio controls preload="metadata" style=" width:50px;  border-radius: 100px;margin-top: 15px; float: left;">
        <source src="https://s4.uupload.ir/filelink/MeiZSg8dmNUl_a0ba664242/koe_no_katachi_a_silent_voice_-_lit_(feora_remix)_pe7w.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

But when i use chrome it doesnt show the play/pause button like firefox it shows timeline which i tried to remove it with:

audio::-webkit-media-controls-timeline {
    display: none !important;} 

And the 3 dots button holds the play, download, and mute button. I don't want to use any javascript code to make a play/pause button I just want to use CSS and HTML. How can I show the play button for the lower width like 50px in chrome just like firefox?

Answer 1

From MDN regarding the <audio> element:

The element has no intrinsic visual output of its own unless the controls attribute is specified, in which case the browser's default controls are shown.

The default controls have a display value of inline by default, and it is often a good idea set the value to block to improve control over positioning and layout, unless you want it to sit within a text block or similar.

You can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.

To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the HTMLMediaElement API to wire up their functionality.