Seit der Version 3.6 gibt es einen integrierten Audioplayer auf WordPress, den Player von MediaElements.js. Ursprünglich sieht der Player so aus:

Doch dieses Original finde ich etwas düster und der orange farbene und blaue Fortschrittsbalken passen nicht so richtig zu meiner Seite. Daher habe ich mal geschaut, wie und wo man die Farben des Players ändern kann und wurde auf dem Blog von Brian Shim fündig.

Es ist möglich, die Hintergrundfarbe, also das schwarz zu ändern, die Farbe des Textes sowie die Farben der Fortschrittsbalken. Das Playericon und auch das Lautsprechericon sind Bilder. Um diese zu ändern, müssten Sie diese in Ihrem Verzeichnis „/wp-includes/js/mediaelement/controls.svg“ per FTP austauschen.
Im Folgenden sehen Sie, wie Sie die Farben des Audioplayers leicht im Dashboard ändern könnnen:

Öffnen Sie im Dashboard > „Design“ > „CSS bearbeiten“. Es öffnet sich der Editor einer  benutzerdefinierten CSS (Cascading Style Sheets). In der CSS steht, wie eine Webseite dargestellt werden soll. Also Angaben zur Schrift und Schriftgröße, zu den Farben und Linkfarben, Abständen und mehr. Die benutzerdefinierte CSS ermöglicht es, Änderungen am Design vorzunehmen, ohne die vom Theme vorgebene CSS zu ändern. Hier können Sie zusätzliche Angaben zur Darstellung machen und diese werden dann vor den Themeeinstellungen berücksichtigt. Und gibt es eine Aktualisierung des Themes, werden sie auch nicht überschrieben.

In der benutzerdefinierten CSS können Sie auch die Darstellung des Audioplayers ändern.

Im Steylesheet Editor fügen Sie die Angaben für die Darstellung des Audioplayers ein. Sie können unten stehenden Code einfach kopieren, die entsprechenden Farbcodes ändern (im Folgenden fett und rot dargestellt) und – nicht vergessen – rechts auf „Stylesheet speichern“ klicken.

/* WP 3.6 Native Audio Player styling*/

 /* change the color of the background */

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

/* change the color of the lettering */
 .mejs-currenttime,
 .mejs-duration {
 color: black !important;
 }

/* change the color of the progress bar */
 .mejs-controls .mejs-time-rail .mejs-time-total {
 background: #a5d867 !important;
 }

/* change the color of the current time bar */
 .mejs-controls .mejs-time-rail .mejs-time-current {
 background: #ff4000 !important;
 }

/* change the color of the file loading bar */
 .mejs-controls .mejs-time-rail .mejs-time-loaded {
 background: #5c8c21 !important;
 }

Der Player ist jetzt dunkelgrau, die Schrift schwarz. Entscheiden Sie sich nicht für einen zu  hellen Hintergrund. Denn dann können Sie zwar die Schrift-Farbe ändern, jedoch die Player/Pause- und  Lautsprecher-Icons sind evtl. nicht mehr sichtbar.

Der „progress bar“ ist hellgrün,

der „current time bar“ orange und der „file loading bar“ dunkelgrün.

Gestalterisch geht da sicherlich noch was 😉

Eine schöne Übersicht der websicheren Farben finden Sie auf mediaevent.de in einem Tutorial von  Ulrike Häßler.

Viel Erfolg!