Audio-Archiv in Flexbox-CSS mit mehreren MyPlayer-Instanzen

Übersicht

Ziel und grundsätzliche Anforderungen: Für die Präsentation meiner Sammlung von Audio- und Musikproduktionen benötigte ich ein HTML-Dokument, das ein Archiv meiner Sammlungen („Sampler“ bzw. „Alben“) von Veröffentlichungen im MP3-Format, jeweil mit einer M3U-Playlist pro Album sowie einige Infos, Cover-Art und externe Links zu jedem Album übersichtlich darstellt.

Sinn und Zweck ist die Verfügbarmachung einer Reihe von Alben an Besucher meiner Webseite, damit diese die Stücke bzw. Zusammenstellungen sichten und ggf. direkt im Webbrowser wiedergeben können.

Dabei sollen die verschiedensten Endgeräte unterstützt werden („mobile-ready“ u.a.). Grundlage der Abspielbarkeit von Mediendateien direkt im Webbrowser ist mein eigener Web-Audio-Player MyPlayer mit Playlist- und M3U-Unterstützung, basierend auf dem verbreiteten MediaElement.js.

Geforderter Einsatzbereich:

Es soll mindestens eine Einbindung auf meiner eigenen Webseite erfolgen, dort Darstellung z.B. in einem Teilbereich, auf einer dedizierten Seite o.ä.

Verlinkung von anderen Präsentationen wie meinem Video-Archiv bei YouTube; zu diesem Zweck Anpassbarkeit der Gestaltung bzw. des „Look & Feel“ zwecks Angleichung an solche externen Auftritte. Gestaltung bevorzugt in reinem CSS, direkt im HTML-Dokument.

Für das responsive HTML-Layout soll Flexbox-CSS zum Einsatz kommen, also display: flex wie in CSS3 verfügbar.  Dynamische Funktionen (z.B. Lighbox für Cover Art) sollen in JS möglichst mit jQuery oder möglichst kleinen JS-Anwendungen realisiert werden.

Bemerkungen

MyPlayer: Es mussten umfangreiche Änderungen am MyPlayer-CSS vorgenommen werden. Diese sind, wo es angebracht war, in den dafür dediziert installierten MyPlayer (/test/snd/unsorted/mp3/player/) fest eingebaut (local.css angepasst und MyPlayer neu compiliert) oder werden speziell für dieses Projekt in der index.html als CSS-Override (z.T. mit !important) angewendet. Die Forderungen, dass alles CSS in index.html stehen soll, war deswegen nicht einhaltbar, weil manche CSS-Regeln in MyPlayer sich im Lauf der Umsetzung als fehlerhaft herausgestellt haben und behoben werden mussten.

Hier ein Listing der CSS-Overrides in der index.html für den im Projekt verwendeten MyPlayer:

 .mejs { background-color: #a8a8a8!important; }
 .mejs li { padding-top: .2em; color: blue; }
 .mejs li:hover { background-color: ffefad; }
 .mejs-container { background: none; height: 100%!important; }
 .mejs-controls { height: 32px!important; }
 .mejs-duration-container { margin-left: 1em!important; }
 .mejs-inner { height: 100%!important; }
 .mejs-mediaelement { height: auto!important; }
 .mejs-playlist { height: 100%!important; }
 .mejs-poster { height: 32px!important; }
 .mejs-time-rail { width: 95px!important; }
 .mejs-time-total { width: 95px!important; }

Man sieht, dass zumindest einige dieser Overrides immer noch Unklarheiten bzw. Unrichtigkeiten im MyPlayer-CSS sind und eigentlich auch dort behoben werden sollten (TODO).

Flex CSS: display: flex hat sich nach einigem Experimentieren und Feinanpassungen in Browser-Displays von sehr großen Desktops (4k) bis zu kleineren Smartphones (4″) bewährt und stellt dort die einzelnen Alben sinnvoll zu Boxen arrangiert 1-, 2- oder 3-spaltig dar. Das Styling (Template) ist über alle diese Geräteklassen hinweg responsiv, wobei nur ein einziger Breakpoint bei width: 100em erforderlich ist.

Der Alben-Flexbox-Container ist ein div-Element mit Klasse slides, das div-Elemente mit Klasse slide enthält. Das CSS, um den Alben-Container zu einem Flexbox-Container zu erklären, lautet:

/* Alben-Container. */
.slides { display: flex; flex-wrap: wrap; max-width: 62.5em; }
/* Breakpoint bei Browserfenster-Breite "100 em". */
@media (min-width: 100em) {
    .slides { max-width: 87.5em; }
}

Hinweis: flex-wrap: wrap ist erforderlich, damit die Boxen nebeneinander auftauchen, ansonsten erfolgt kein Einsortieren der Boxen in Zeilen und Spalten, sondern sie kommen alle untereinander (bzw. nebeneinander i.A.v. CSS-Eigenschaft flex-direction)

Hier ein zwei Screenshots bei unterschiedlichen Browserfenster-Breiten:

Screenshot des Musik-Archivs auf einem FullHD PC-Desktop, Browserfenster bei 100% Breite.

Screenshot des Musik-Archivs auf einem FullHD PC-Desktop, Browserfenster bei 50% Breite.

Demo

Das Archiv ist ab jetzt unter dieser URL abrufbar: https://tk-sls.de/musik.

Sonstiges

Bei der Umsetzung habe ich Fehler bzw. falsche Grundannahmen in MyPlayer gefunden, die ich in näherer Zukunft in einer Bugfix-Release beheben möchte.