Darstellung eines Audioplayers per Shortcode definieren

Geschätzte Lesezeit: 2 Minuten

Um Töne oder Musik in Beiträgen eines Word Press-Blogs abspielen zu können, reicht es in der Regel aus, einen einfachen Shortcode einzufügen. Die Verwendung von Shortcodes ermöglicht das Plugin Jetpack und das darin enthaltene Modul Shortcode Embed.

In meiner bunten Blogwelt binde ich hin und wieder sehr gerne Audiodateien ein. Ich finde, sie lockern Beiträge wunderbar auf. Außerdem unterstreichen sie ähnlich wie Fotos das geschriebene Wort.

Dazu lade ich die entsprechende Sounddatei in die Mediathek und füge folgenden Shortcode

 ein. Mit diesem Code stelle ich einen einfachen Audioplayer dar, und mit Klick darauf wird der Sound abgespielt.

Blogs bei WordPress.com benötigen ein kostenpflichtiges Upgrade. Erst dann ist das Hochladen von Sounddateien möglich.

 

Eine schöne Beschreibung für diesen einfachen Audioplayer ist bei Word Press.com zu finden.

Individuelle Anpassung

Dieser Code erfüllt schon einmal seinen Zweck, allerdings finde ich ihn etwas trist. Daher suchte ich nach einer Möglichkeit den Player farblich meinem Blog anzupassen und eine Anzeige des Titels erreichen.

In diesem Beitrag von „wordpress tips“ findet ihr eine detaillierte Aufstellung über das Anpassen der Farben von einzelnen Elementen des Mediaplayers.

So sieht zum Beispiel die Audiodatei mit dem Vogelgezwitscher in meinem Beitrag Sauerländer Sängerknabe aus:

Wie ihr seht, habe ich nach der Media-URL noch den Titel des Sounds eingefügt, der nun beim Abspielen der Sounddatei angezeigt wird.  Mit der Farbangabe hinter „loader“ wird der Ladebalken in Grün und hinter „bg“ der Hintergrund in Orange dargestellt. Dabei muss ich darauf achten, dass zwischen den einzelnen Elementen ein  „|“ eingefügt wird. Die Farben werden in Hex-Werten angegeben.

Statt der Abspieldauer die verbleibende Zeit anzeigen lassen

Bei dem kurzen Vogelgezwitscher im oben erwähnten Beitrag habe ich es bei der Anzeige der Abspielzeit belassen, da es sich hier um eine kurze Sounddatei handelt.

Allerdings finde ich es bei längeren Liedern angenehmer, wenn bei Abspielbeginn deren Gesamtdauer angezeigt und die Restzeit beim Anhören heruntergezählt wird. Diese Form der Zeitangabe wollte ich unbedingt in der Albumrezension „Wonder Wing“ in den Beispielstiteln erreichen.

Umgesetzt habe ich das nun mit diesem Code

Fündig geworden bin ich in einem weiteren Beitrag von wordpress tips, in dem ausführlich das Hinzufügen zusätzlicher Funktionen dokumentiert ist.


Nun wünsche ich Euch viel Spaß beim Ausprobieren. smilie


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Du hast 15 Minuten Zeit, um Deinen Kommentar nachträglich zu korrigieren.

Copyright © Sylvis Blog • 2017. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: