Changing the Audio Player Colors

WordPress makes it easy to add an mp3 player to our post and pages, but it can be a bit boring.

You can make the player stand out by tweaking the css.

This is an image of the standard player that comes with wordpress
player

and here is my modified player

Below is the css code I am using to turn the player red, white and blue.

Simply copy the code below and replace the color with whatever you like.

You can use a plugin to set custom css code (I use simple custom css)

/* yellow focus */
.mejs-controls .mejs-button button:focus {
outline: none !important;
}

/*background color*/
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
background: url('') !important;
background-color: red !important;
}

/* text color */
.mejs-currenttime,
.mejs-duration {
color: white !important;
}
.mejs-horizontal-volume-current
{
background:#0073aa!important;
}