Darstellung eines Audioplayers per Shortcode definieren

Musikupload

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

[ audio ] (ohne Leerschritte zwischen den Klammern)

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

Hinweis
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:

[ audio https://www.bunte-blogwelt.de/wp-content/uploads/2012/06/01_vogelgezwitscher_lang.mp3|titles=Tierisches Gesangswunder|loader=0x009900|bg=0xF26521 ] (ohne Leerschritte zwischen den Klammern)

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

[ audio https://www.bunte-blogwelt.de/wp-content/uploads/2012/12/02-ignacio-nez-otoo.mp3|titles=Otono aus dem Album Wonder Wing|loader=0x009900|bg=0xF26521|remaining=yes ]

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. :-)

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".