Style the audio html tag

Question

Is it possible to add css styles to the audio tag? I have tried but I couldn't.

Thanks.

<li class="music">
    <div class="podcast">
        <div class="img-episodes-container">
            <img  src="images/podcast1.jpg" alt="microfono">
        </div>

        <h4>Lorem, ipsum dolor.</h4>

        <audio controls>
            <source src="sounds/sound1.mp3">
        </audio>
    </div>
</li>

Answer 1

This is possible!

audio::-webkit-media-controls-panel {
  background-color: coral;
}

 <li class="music">
   <div class="podcast">
     <div class="img-episodes-container">
       <img src="images/podcast1.jpg" alt="microfono">
     </div>
     <h4>Lorem, ipsum dolor.</h4>
     <audio controls>
       <source src="sounds/sound1.mp3">
     </audio>
   </div>
 </li>

Here is the full list:

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

As per this incomplete answer: Is it possible to style html5 audio tag?

Please note these are the Chrome / Webkit supported tags. There may or may not be Firefox / IE11 supported tags for the audio element as there is little-to-no documentation on -moz or -ms prefixing conventions/support for this tag.

Answer 2

You can Style the audio Tag as the answer above mentioned, but the issue is it will not have support on most of the browsers which might cause your application for not having cross browser compatibility, I suggest you to design a custom player and make functionality like the audio tag , it will more feasible for you.