HTML5 Audio Customizations

Here are a list of different customizations you can use with the HTML5 Audio stack.

Container size & color options

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:

Time options.

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:

Volume Controls

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!