Podcastplayer mit Twig für MP3 Audiodateien

Für ein Kundenprojekt soll eine Oberfläche geschaffen werden, in der MP3 Audiodateien als Podcastplayer mit einer Liste der Titel und Steuerelemente umgesetzt werden. Die Bedienung vom Player soll über die Liste der Titel und Vor- Zurückbuttons erfolgen. Zusätzlich soll die Lautstärke geregelt werden können und die Fortschrittsanzeige mit Zeitangabe. Da die Dateinamen oft sehr lang oder nichts aussagend sind, soll der Titel aus der Dateiverwaltung optional ausgegeben werden. Wenn der Titel nicht gepflegt wurde, dann kürze den Dateinamen auf 16 Zeichen und hänge die Dateierweiterung hinten an.  

Die Basis ist das native Audio-Element mit einem angepassten Twig-Template und einem JavaScript + CSS.

Song 1
00:00 / 00:00
  • demo-1.mp3
  • demo-2.mp3
  • demo-3.mp3

Das Twig Template für den Player muss unter templates/content_element/player/ abgelegt werden und die TXT Datei player-podcastplayer_html_twig.txt in player-podcastplayer.html.twig umbenannt werden.

Damit das neue Twig Templates geladen wird ist das löschen vom Contao Symfony Cache nötig. Alternativ könnt ihr auch im Backend auf Debug-Modus schalten, um im gleichen Browser die Änderungen zu sehen.

Zurück zur Contao FAQ Übersicht