Der eigene Audioplayer

Grundsätzlich kann heute jeder moderne Browser Audiodateien abspielen. Dazu sind keine Plugins oder Player mehr vonnöten. Die Einbindung einer Audiodatei kann dabei über <audio src="pfad/zur/datei/audiodatei.mp3" controls ></audio> erfolgen. Abgespielt wird mit allem, was Browser und Betriebssystem zur Verfügung haben. Das Format *.mp3 geht überall. Auch für Playlists - also Listen mehrerer Audiodateien, die hintereinander abgespielt werden sollen - gibt es einsprechende Möglichkeiten. Wenn, wie im Beispiel, das Wort controls im Audio-Tag steht, dann werden Steuerungselemente angezeigt. Das ist immer eine gute Idee, denn wir wollen Nutzer:innen ja nicht vergrätzen, indem wir ihnen die Lautstärkeregelung oder den 'Stopp'-Knopf vorenthalten.

Eine Liste möglicher Optionen findet sich beispielsweise im MDN unter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio.

So weit, so gut und unkompliziert. Es spielt eine Datei ab, und das überall. Aber: Es sieht sehr schlicht aus, und eigentlich möchten wir ja eine Playlist mit mehreren Titeln, Coverbildern und Bedienelementen im Look & Feel der Webseite.

Aber zunächst ein paar Vorüberlegungen: Wir haben oben gesehen, dassheutzutage jeder Browser Audiodateien abspielen kann, solange sie in einem halbwegs verbreiteten Format vorliegen. Der einzige Browser, der weder MP3, AAC noch WAV kann, ist Opera Mini. Sonst gibt es keine Probleme. Aber schon bei Playlisten sieht es anders aus: Das können ältere Edge, der nun wirklich veraltetete Internet Explorer und aktuelle Safaris unter OSX und iOS. Chromebasierte Browser können das aber von Haus aus nicht. Also ist das schon mal eine Funktion, die wir nachbauen müssen. Die genaue Übersicht finden wir auf der Webseite "Can I use?"

Um das Rad nicht neu zu erfinden, nutzen wir beispielsweise die JavaScript-Implementierung von Heiner Behrens. Ein kleiner Player, der alles abdeckt, was wir benötigen: Ein paar Buttons, um den Player zu steuern, eine Struktur, die Mediendateien aus einer Playlist fischt, und eine Oberfläche, die man mit JQuery-UI etwas weniger spröde animieren kann als HTML5 das von Haus aus bietet. Für die Struktur und die Einbindung in Contao sorgen wir selbst.

Für schnelle, kleine Ergänzungen nutze ich dabei gerne die Rocksolid Custom Elements - selbstverständlich geht das alles auch über eine grundständige eigene Erweiterung und ist dabei kaum aufwändiger. Heute sollen jedoch die Custom Elements reichen.

Bis Contao 4.8: Um schneller arbeiten zu können und auch die PHP-Konfigurationsdateien im Contao-Backend anpassen zu können definiere ich zunächst einmal *.PHP als gültiges Templateformat und lege zwei Dateien an: rsce_audio-player.html5 und rsce_audio-player_config.php. Zur Erinnerung: Die *.php-Datei sorgt für die Struktur und die Eingabefelder im Backend, die *.html5-Datei für die Ausgabe im Frontend.

Ab Contao 4.9 muss ich kein Templateformat definieren, sondern RSCE sorgt selber dafür, dass die *_config.php-Dateien bearbeitet werden können. Angelegt werden müssen sie allerdings über FTP oder SSH.

In der rsce_audio-player_config.php lege ich zuerst meine benötigten Felder an: Ein Titelbild und Boxen für die einzelnen Musikdateien, in denen ich den *.mp3-Track, den Namen des Tracks und ein Coverbild angeben kann. Wie man diese Felder exakt definiert steht im Manual von Rocksolid. Die Boxen werden benötigt, um überhaupt eine Playlist erzeugen zu können - mit einer Einzeldatei ist das ja nicht sinnvoll.

Wenn alle nötigen Daten beisammen sind, dann können wir uns im rsce_audio-player.html5-Template um die Optik kümmern. Im Layout wünschte sich die Kundin ein grosszügiges Design, grosse Bedienelemente und auch ein abgerundetes Foto von ihr - alles in den Farben ihrer Website. Der Entwurf spiegelte das wider:

Da das Seitenlayout in diesem Fall die Gridfunktionen von Bootstrap nutzt, sind die Einzelelemente schnell angeordnet: Nach der Überschrift kommt ein oberer Bereich (eine row) mit Spalten (col), in denen die Bedienelemente und das Bild mit den CSS-Klassen img-fluid und rounded-circle liegen, darunter ein Element mit der ID now-playing für den Namen des aktuellen Titels und ein Fortschrittsbalken .progress-bar, der anzeigt, wo sich die aktuelle Wiedergabe gerade befindet. Ganz unten dann eine <ul>-Liste mit den Audiodateien - <li audio_url="file.mp3" ...> und ein paar CSS-Klassen, die dem Player mitteilen, dass es sich um Playlist-Items handelt.

Im Backend schaut das entsprechende Rocksolid-Custom-Element so übersichtlich aus, dass die Kundin es gut selbst bedienen kann:

Die Bedienung ist da sehr schlicht: Bild- und Audiodateien wählen, speichern und sich freuen. Die Logik, die Grafik und das nötige Javascript stecken im Ausgabetemplate.

So einfach kann es sein, einen individuellen Player mit Contao umzusetzen.