Audio Playback unter Drupal (mit Playlist)

Nach ein paar Stunden testen höre ich nun gerade Musik aus meinen Boxen ertönen und möchte auch anderen, die dieses Problem gerade in den Wahnsinn treibt, erleuchten. Als erstes verabschiedet euch von Flowplayer und Co. in meinen Augen eine irrsinnige Frickelei und dann auch noch Flash, nein danke! Wir haben es heute doch viel besser, nur muss man da auch erstmal drauf kommen. Wir setzen einfach auf HTML5 – Audio und zwar mit Hilfe des jPlayers. Natürlich dürfen wir User ohne aktuellen Browser auch nicht so ganz im Regen stehen lassen, der jPlayer bietet ein Flashplayer Fallback, für die Bremserfraktion.

Achtung! Bevor jetzt munter das Modul installiert wird und der aktuelle jPlayer in den Library Ordner geschoben wird:

  • Drupal 7: Aktueller jPlayer
  • Drupal 6: jPlayer 1.x

Getestet (mit der Drupal 6 Variante) in Chrome, Internet Explorer 9, Opera 11 und Firefox 4, läuft perfekt.

Also nochmal Punkt für Punkt:

  1. SWF Tools / etc. in die Tonne prügeln.
  2. http://drupal.org/project/jplayer runterladen und unter „sites/modules“ installieren
  3. http://www.jplayer.org/download/ Library herunterladen (1.x für Drupal 6, 2.x für Drupal 7)
  4. Lib unter „librarys/jplayer/jquery.jplayer.min.js“ kopieren
  5. Modul in Drupal aktivieren
  6. Bei der Feldansicht des Filefields eures Audio Inhaltstypen den jPlayer (mit Playlist) auswählen
  7. Enjoy!

What about Views?

jPlayer hat zwar eine Views Integration, die vom Prinzip her auch ganz ordentlich ausschaut, nur leider funktioniert diese bei mir nicht. Folgendes Workaround:

  1. View auf Zeilendesign: Node umstellen
  2. Anzahl der Beiträge: 1
  3. Filter auf euren Audio Nodetype

Um Playlisten durchzuschalten (einen Audio Node kann man ja nun quasi als Playlist ansehen), kann man nun noch AJAX aktivieren und die Seitennavigation.

    Schreibe einen Kommentar

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


    The reCAPTCHA verification period has expired. Please reload the page.