Wer in Worpress Audiodateien einbinden möchte, kann in der Regel einfach das [ audio ] -Tag benutzen, gefolgt vom Dateinamen. Einziger Haken: Die Darstellung des HTML5-Audioplayers ist etwas plump und nicht so ohne weiteres individuell anpassbar, da die Browser individuelle CSS-Styles überschreiben. Es muss also etwas tiefer in die JavaScript Trickkiste gegriffen werden, um das Look & Feel des Players den eigenen Bedürfnissen anzupassen. Ich hab‘ da mal was gebastelt…
Ein weiterer HTML5 Audioplayer für WordPress?
Inhalt
Nun wäre WordPress nicht WordPress, wenn es nicht bereits ein großes Angebot an fertigen PlugIns geben würde, die das Einbinden individueller Audioplayer ermöglichte. Allerdings stieß ich bei meiner Suche nach einem geeigneten PlugIn auf folgendes Problem.
- Entweder waren sie veraltet und funktionierten nicht mit aktuellen WordPress Versionen oder
- es waren aufgeblasene Eierlegende Wollmilchsäue, die weit über das hinaus gingen was ich eigentlich wollte.
- Sie kosten Geld und obendrein im Abomodell
Mit all den für mich überfüssigen Funktionen einher gingen entweder eine Menge unnötiger Quellcode, durch für mich völlig überfrachtete Funktionen oder wiederkehrende Kosten, die ich für meine kleinen Blogs gerne vermeiden würde.
Ich bin nun kein beruflicher Coder, aber mit HTML, JavaScript und CSS kenne ich mich schon ein bisschen aus. Schlussendlich gibt es heutzutage auch noch so nützliche KI-Agenten wie ChatGPT, die wirklich hilfreich sind, wenn es mal irgendwo klemmt. So habe ich die KI genutzt, um mich immer dann in die richtige Richtung zu schubsen, wenn ich wieder einmal feststeckte und auch um den finalen Quellcode so aufzubereiten, dass Profis keinen Schreikrampf bekommen, wenn sie reinschauen.
Herausgekommen ist nach ein paar Tagen Arbeit und ungefähr drölfzig Revisionen mit Feintuning und Kompatibilitätstests ein schlankes PlugIn, mit dem ihr eure Audiodateien komfortabel in eure Beiträge einbinden könnt. Die Darstellung konfiguriert ihr global mit ein paar wenigen Klicks über eine Settings-Menü. Die Audiodatei wird dann mit einem [ dscap_audio ] -Tag in den Beitrag gehievt. Hier lassen sich individuelle Darstellungen auch noch nachträglich anpassen, die dann die globalen Einstellungen überschreiben.
Standard Audioplayer vs DS Custom Audio Player
Der normale WordPress HTML5 Audioplayer wird per Shortcode direkt in euren WordPress Beitrag eingebunden und ist halt ein schwarzer Balken. Am Aussehen lässt sich da nicht viel ändern. Eigentlich gar nichts.
Der DS Custom Audio Player wird ebenfalls per Shortcode eingebunden, kann aber individuell mit folgenden Attributen angepasst werden:
- Breite (in px, %, em, rem, vw, vh)
- Hintergrundfarbe
- Buttonfarbe
- Iconfarbe
- Mit Titelanzeige oder ohne
- Mit Lautstärkeregelung oder ohne
- Mit Downloadbutton oder ohne
- Darstellung in Kompaktansicht (schmaler, ohne Titelanzeige)
Weitere Vorteile
- Anzeige der Gesamtlänge eines Clips von Anfang an (und nicht etwa erst, wenn der Play-Button gedrückt wurde)
DS Custom Audio Player Einstellungen
Die Einstellungen für das Look & Feel des HTML5 Players findest Du nach Aktivierung des Plugins in WordPress im Menü unter Einstellungen -> Custom Audio Player. Ich habe Sprachdateien für deutsch, französisch, spanisch und italienisch hinterlegt, so dass das Menü je nach WordPress Installation gleich in der richigen Sprache angezeigt wird.
Ein Player, viele Gesichter
Der folgende Code stellt den Player wie folgt dar, wenn in den Settings alle Optionen außer der Kompaktansicht ausgewählt wurden.
[ dscap_audio src=“https://example.com/path/meinedatei.mp3″ ]
Zwar ist der Player responsive, aber wenn es zu eng wird, um alle Elemente anzuzeigen, empfiehlt es sich, entweder weniger Elemente zu verwenden
Oder aber in die Kompaktansicht zu wechseln.
Die Kompaktansicht wird entweder global in den Settings gesetzt oder individuell durch den Zusatz compact=“1″. Dann sieht der Player so aus:
Natürlich geht es auch ohne Downloadbutton oder Lautstärkeregler oder beides ohne, egal ob in der Normal- oder Kompaktansicht.
Oder ein ganz kompakter Player:
Bunter geht es natürlich auch. Mit den Attributen color, bg und icon können jeweils die Farben für den Hintergrund, die Buttons und die Icons definiert werden. So wird aus diesem Shortcode folgender Player
[ dscap_audio src=“https://…“ bg=“#f80000″ color=“#750000″ icon=“#ffff00″ ]
Die Attribute im Einzelnen
- src – **Pflichtfeld**, URL zur Audiodatei.
- width – CSS-Wert, z. B. `400px` oder `100%`.
- color – Button-Hintergrundfarbe (Kreise), z. B. `#0073e6`.
- bg – Hintergrundfarbe des gesamten Players.
- icon – Farbe der SVG-Icons, z. B. `#ffffff`.
- compact – `0` = Normalansicht, `1` = Kompaktansicht, `2` = superkompakte Ansicht,
- show_volume – `1` = Lautstärkeregler anzeigen, `0` = ausblenden.
- show_download – `1` = Download-Symbol anzeigen, `0` = ausblenden.
- align – Ausrichtung: `left`, `center` oder `right`.
CS Custom Audio Player Plugin Download
Hurra, seit dem 23. September 2025 ist das Plugin nun offiziell über das WordPress Repository zu beziehen. Ihr findet die neueste Version also immer über die Plugin-Suche in WordPress selbst, oder aber über diesen Link.
Last but not least: Warum „DS“ Custom Audio Player? Naja, Dennis‘, D’s, Custom Audio Player halt. ;-)
