Phlow Blog
Neues aus Webdesign, Social Media & Journalismus

HTML5-MP3 Player für (WordPress)-Websites

MP3 & HTML // Vor einiger Zeit habe ich die Website für das Netlabel Broque von Christian Kausch als WordPress-Website umgesetzt. Zum Einsatz kam die bislang coolste und perfekt umgesetzte Version eines über alle Browser kompatiblen Players, der sogar verlinkte YouTube-Videos abgespielt hat. Um den Player zu nutzen, musste man lediglich ein Javascript in den HTML-Code setzen und sämtliche verlinkten MP3-Dateien konvertierte das Script automatisch in einen Player. Doof nur, dass Yahoo! das feine Projekt einfach gekippt und gelöscht hat. Jetzt suche ich nach Alternativen…

Eine erste Recherche hat die folgenden WordPress-Plugins ans Tageslicht geholt:

Kennt jemand von Euch eine spannende Lösung mit einem minimalistisch, aber edel aussehenden Player?

Vorzeitiges Testergebnis

Nachdem ich zuerst ein wenig mit dem schlicht gehaltenen Player MediaElement.js herumgespielt habe, funktionierte der nicht immer. Komischerweise spielte der Player von externen Websites MP3 nicht gerne ab bzw. gar nicht. Danach habe ich mir dann den unten eingeblendeten mb.miniAudioPlayer geschnappt und der funktioniert bei mir auf meinem Samsung Galaxy II, meinem iPad 2 und auf dem Mac in Chrome, Safari als auch Firefox. Was will man mehr. Und das Design ist auch vollkommen akzeptabel. Und das wichtigste an dem Player ist die Tatsache das direkte Links in Form von…

<a href="http://www.archive.org/download/nore001/04-kollektiv_turmstrasse_-<em>new_weakness_ep</em>-_elemental_pleasures.mp3">elemental pleasures</a>

…in den Player verwandelt.

mb-mp3-html5-player

Player wieder deaktiviert: Nur ein Screenshot

Nachteil des mb.miniAudioPlayers

So ein Plugin haut natürlich zusätzlichen Javascript-Code in den Quellcode (hier gleich zwei verlinkte Scripte im Header) und eine CSS-Datei. Hier fände ich es superwichtig eine Möglichkeit zu haben, das Plugin pro Beitrag ein- und abzuschalten. Darum werde ich wahrscheinlich das Plugin wieder deaktivieren. Schließlich will ich, dass dieses Blog schnell auf mobilen Geräten geladen wird.

Autor: Moritz »mo.« Sauer
2. Oktober 2013