Here are a list of different customizations you can use with the HTML5 Audio stack.
The first and most import one is this
.mejs-container
This adusts the width of the player controls. You can adjust it like this:
.mejs-container {width: 26px !important;}
Which will make the width of the player 26 pixels. This will stop anything else from displaying so if you want just a play and pause button to show, this will do all of that for you. You can also do something like this to color the container:
`.mejs-container {background-color: red !important;}
This will make the entire background of the container the color you want. Now, there is a gradient set to the background color, if you do not want that, and would prefer a flatter look, use this code:
.mejs-controls {background-image: none !important;}
Along with the color control added earlier, your stack will look like this:
There are two time controls:
.mejs-currenttime
and .mejs-duration
These can be used to change the color of the time areas on the player, or even turn it off, here are two examples:
.mejs-currenttime {display: none !important}
.mejs-duration {color: yellow !important;}
If you do not want to show the time rail that is between the current time and the duration time, ue this code:
.mejs-time-rail {display:none !important;}
Please note, if you use this, you will also need to adjust the container width as stated earlier in this tutorial, or your player will look like this:
The only thing you can really do with the volume controls is hide them, you can do that this way
.mejs-button.mejs-volume-button{display:none!important;}
.mejs-horizontal-volume-slider{display:none !important;}
You can not color the pause/play button or volume controls as they are SVGs as background images and can not be colored.
We hope you have enjoyed this tutorial, please have fun customizing the HTML5 Audio stack to your needs. Now go forth and make your websites great!
© 2025 Weavers Space | Terms of Service | Privacy Policy