Ich habe mich in der vergangenen Woche, im Auftrag eines Kunden, mit einem HTML5-Audio Player Plugin für WordPress beschäftigt. Dieses Plugin war von der Idee zwar gut Gedacht und hatte auch eine hohe Verbreitung, in einigen Teilen der Umsetzung lief es allerdings nicht wirklich gut.
Es gab beispielsweise Probleme im Zusammenhang mit gängigen Cache Systemen, wie z.B. WP-Super-Cache oder dem W3 Total Cache.
Da aber genau so eine Cache-Lösung auf der Webseite zum Einsatz kam, gab es erhebliche Fehler mit den Audio-Playern. Für den Kunden hatte ich das Plugin entsprechend angepasst, um es kompatibel zu dem Cache-System zu machen.
Mittlerweile habe ich das komplette HTML5 Audio Player Plugin runderneuert, also den Code komplett neugeschrieben und auf eine Objektorientierte-Basis gehoben, Bugs ausgemerzt, Cache Kompatibilität sichergestellt und auch neue Funktionen hinzugefügt.
Das ganze System basiert auf dem ursprünglichen oEmbed HTML5 Audio Plugin von Honza Skypala, hat aber von der Code-Basis her nicht mehr viel damit zu tun. Für Nutzer die Umsteigen möchten, ist dies jedoch kein Problem. Mein neues Plugin ist natürlich komplett kompatibel zu der oEmbed Struktur aus dem original Plugin.
Das neue Plugin trägt den Namen PB oEmbed HTML5 Audio – with Cache Support und kann über das WordPress Plugin Directory kostenlos heruntergeladen werden.
PB oEmbed HTML5 Audio – Funktionen
Das PB oEmbed HTML5 Audio Plugin bietet euch folgende Funktionen:
- Einbinden von Audio-Files über oEmbed Technologie
- Komplette Einstellungsmöglichkeiten über HTML5 Audio Shortcode
- Kompatibel zu gängigen Cache-Systemen
- Flash-Player Fallback
HTML5 Audio Player in WordPress einbinden
Um das Plugin nutzen zu können, muss es erst einmal installiert werden. Der Installations-Vorgang ist relativ simpel, da dass Plugin im WordPress Plugin Directory verfügbar ist.
Geht einfach in eurem WordPress Backend auf den Punkt Plugins > Installieren und sucht dort nach dem Plugin-Namen, von da aus kann das Plugin dann mit einem Klick installiert werden.
Nach der Aktivierung stehen sofort alle Funktionen zur Verfügung.
Einbinden von Audio-Dateien mittels oEmbed
Dank der oEmbed-Technologie ist es vollkommen ausreichend, wenn ihr die URL zu der Audio-Datei in den Editor setzt, diese wird dann automatisch von dem Plugin erkannt und in einem HTML5 Audio Player bzw. je nach Browser über den Flash Fallback eingebunden.
Beispiel:
https://www.webdesign-podcast.de/meine-audio-datei.mp3 |
Einbinden mittels HTML5 Audio Shortcode
Wer mehr Kontrolle über die Ausgabe und den Player haben möchte, kann folgenden Shortcode verwenden um den HTML5 Audio Player mit zusätzlichem Flash-Fallback zu erzeugen:
` ` |
Alle Parameter in dem Shortcode sind optional, es muss aber mindestens eine Audio-Quelle angegeben werden also mp3, ogg oder wav.
Es sind folgende Standardwerte gesetzt (wenn von euch im Shortcode nichts anderes angegeben wird):
- autoplay = off
- loop = off
- preload = on
- controls = on
- flash_fallback = on
Wichtig: Der Flash-Fallback (flash_fallback) funktioniert nur mit mp3 Dateien! Um also alle Browser zu unterstützen, solltet ihr entweder eine mp3 Datei und eingeschalteten Flash-Fallback oder mp3 + ogg verwenden.
Eine genaue Übersicht, welcher Browser welche Formate unterstützt findet ihr in diesem Artikel:
HTML5 Audio Tag verwenden – Tutorial
HTML5 Audio Plugin herunterladen: PB oEmbed HTML5 Audio – with Cache Support
Solltet ihr Fragen oder Anregungen zu dem Plugin haben, freue ich mich auf euer Kommentar oder eure E-Mail.
Die Spanische-Übersetzung stammt von Andrew Kurtis – webhostinghub.com.
Viel Spaß damit
Pascal
Schlagworte zu diesem Artikel: Audio-Tag, Browser, HTML5, Podcast, WordPress
Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.