WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 12.05.2023 21:07:52

musenfreund
Member

Audioplayer

Hallo,

für eigene Audio-Aufnahmen verwende ich bisher den kleinen jplayer. Der funktioniert zwar einwandfrei, ich hätte aber gerne auch eine Fortschrittsanzeige und Scrollmöglichkeiten im Stil des Soundcloud-Players. (Ich möchte die Files im eigenen Webspace behalten, also keine eine Einbindung von Soundcloud-Files).

Beispiel Soundcloud-Audioplayer

Gibt es dafür eine Lösung oder Idee?

Offline

#2 13.05.2023 01:17:40

bernd
Developer

Re: Audioplayer

Moin,

schlechte Nachricht zuerst:
sowas ausgefeiltes wie die Soundcloud-Player-Anzeige gibt's (für uns = WBCE) nicht wirklich.
Wenn du mal guckst was da u.a. an JavaScripten dahintersteckt, dann wird dir "speiübel" - das mag hier bestimmt keiner warten wollen tongue

Bin ja selber Musiker und betreue einige Seiten von Musikern deshalb ist das Thema nicht ganz uninteressant für mich.
Ich nehme jetzt einfach mal an, dass du mit "verwende ich bisher den kleinen jplayer" das jPlayer-Modul aus dem AOR meinst, deshalb beziehe ich folgendes auf dieses Modul:

Das Modul verwendet im wesentlichen zwei Komponenten:
- einmal den eigentlichen jPlayer der sich um die ordentliche Wiedergabe verschiedener Audioformate auf den unterschiedlichsten Plattformen kümmert.
- zum anderen das Plugin jPlayerJukebox das sich darum kümmert aus den, auf einer Seite, gefundenen Links zu Audio-Dateien eine Art Playlist an jPlayer zu übergeben. Das Teilchen ist zwar auch schon aus 2016 macht aber erstaunlicherweise immer noch eine ordentliche Arbeit und...

jetzt kommen wir zu den (halb)guten Nachrichten wink
es läßt sich über Optionen in der frontend.js entsprechend beeinflussen.

Wenn du die frontend.js z.B. so ergänzt:

$(document).ready(function(){
  // Initialize jPlayerJukebox
  var jpjb = new jPlayerJukebox({
	 'jukeboxOptions': {
		'position': 'float-bl',
		'className': 'ui-light ui-gradient',
		'viewState': 'maximized'
	 }
  });
});

also die Zeile 'viewState' ... hinzufügst erhältst du eine  schon "richtig amtliche" Player-Anzeige links unten auf der Seite.
Wenn du statt 'maximized' 'minimized' verwendest, dann ist sie initial versteckt und läßt sich auf Mausklick einblenden.
Darüber hinaus kannst du auch mit 'position' den Platz der Player-Anzeige beeinflussen, etc.
Die möglichen Optionen findest du in Reference - Options auf der Plugin-Seite.

Last edited by bernd (13.05.2023 01:18:49)


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

jean

#3 13.05.2023 20:01:15

musenfreund
Member

Re: Audioplayer

Danke für diesen coolen Tipp! Hab mir die Jukebox-Seite angeschaut und will morgen mal testen das Teil einzubinden. Es scheint ein brauchbarer Kompromiss zwischen dem recht spartanischen jplayer -Modul und dem aufgemotzten Soundcloud-Player zu sein.

Wenn es nicht mehr betreut wird, bleibt nur zu hoffen, dass es trotzdem noch einige php/JS-Updates überlebt.

Berichte dann über das Ergebnis.

Offline

#4 13.05.2023 20:05:15

bernd
Developer

Re: Audioplayer

Ist oben vielleicht nicht ganz klar geworden:
das Jukebox-Plugin ist bereits im jPlayer-Modul integriert. Es muss nur in der frontend.js entsprechend meinem Beispiel konfiguriert werden ...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

#5 16.05.2023 17:56:47

musenfreund
Member

Re: Audioplayer

Ok, hab es jetzt so gelöst:
Screenshot-Jukebox

Eigentlich hätte ich gerne für jede Datei in der leeren Spalte rechts einen einzelnen Player. Aber die entsprechende Positionseinstellung 'static' zeigte nicht den Effekt wie auf der Demo-Seite. Hab es deswegen unten angepinnt:

'position': 'fixed-b',
'viewstate': 'maximized'

Außerdem habe ich oben die CSS-Buttons je nach Zustand eingefärbt.
Das ist jedenfalls insgesamt ein guter Kompromiss, mit dem ich leben kann.

Danke noch mal für deine Tipps. Da wäre ichim Leben nicht drauf gekommen.  smile

Offline

Liked by:

bernd

Board footer

up