MUSIC SYSTEM by Tonino Gerns

Das Music System bringt zwei Builder-Elemente für YOOtheme Pro mit, die sich denselben Player teilen: eine Trackliste für Hörproben und einen Promo Song für eine einzelne Veröffentlichung. Beide spielen Audiodateien aus deiner eigenen Medienverwaltung ab - kein eingebetteter Player eines fremden Dienstes, kein Skript von einem externen Server, keine Besucherdaten an Dritte.

Trackliste mit durchlaufender Wiedergabe

Das Element Hörprobe stellt deine Titel als Tabelle dar: Nummer, Cover, Titel und Interpret, auf Wunsch dazu Album und Dauer. Der Abspielen-Button liegt auf dem Cover; sobald ein Titel läuft, ersetzt ein animierter Equalizer die Tracknummer und die Dauer zählt herunter. Die optionale Werkzeugleiste bringt Alle abspielen und Zufallswiedergabe - beide laufen durch die komplette Liste, ein Klick auf eine einzelne Zeile beendet den Durchlauf wieder. Die Spieldauer trägst du entweder selbst ein oder lässt sie aus der Audiodatei lesen. Die Liste erscheint schlicht oder eingefasst in eine Card, Bildgröße, Abspielen-Button und Equalizer-Farbe stellst du im Panel ein.

Promo Song für eine einzelne Veröffentlichung

Der Promo Song stellt eine Single oder ein Album in den Mittelpunkt: Cover mit Play-Overlay, Songtitel, Interpret, Label und Veröffentlichungsdatum, dazu zwei frei belegbare Buttons mit Icon - etwa für Streaming und Shop - und ein Hinweisfeld darunter. Auf Wunsch füllt eine unscharfe Kopie des Covers den Hintergrund. Overlay-Stil und Position des Play-Icons wählst du selbst; ist kein Cover gesetzt, erscheint stattdessen ein regulärer Icon-Button, damit die Hörprobe abspielbar bleibt. Alle Inhaltsfelder lassen sich an dynamische Inhalte binden - steht der Promo Song auf einer Artikelseite, zieht er Titel, Cover und Links direkt aus dem Artikel.

Barrierefrei bedienbar

Abspielen und Pausieren laufen über echte Buttons, sind per Tastatur erreichbar und melden ihren Zustand an Screenreader. Die Beschriftung nennt den Titel, statt zwölfmal Play zu sagen. Der Fokusring ist so gebaut, dass er auf hellem wie auf dunklem Artwork erkennbar bleibt, die Trackliste hat Tabellenbeschriftung und Spaltenbezüge, und die Equalizer-Animation schaltet sich ab, wenn im Betriebssystem Bewegung reduzieren aktiv ist. Was das Element nicht ersetzen kann: Reine Audioinhalte brauchen zusätzlich eine Textalternative auf der Seite - das Panel weist an der passenden Stelle darauf hin.

Kurzanleitung: Trackliste aufbauen

1. Element Hörprobe aus der Gruppe Tonino Gerns einfügen.
2. Im Reiter Inhalt unter Einträge die Titel anlegen: Audiodatei, Titel, Interpret, dazu wahlweise Cover, Album und Dauer.
3. Unter Einstellungen die Tabellenspalten wählen und bei Bedarf die Werkzeugleiste mit Alle abspielen und Shuffle einschalten.
4. Layout auf Liste oder Card stellen und Bildgröße, Abspielen-Button und Equalizer-Farbe anpassen.

Kurzanleitung: Promo Song aufbauen

1. Element Promo Song einfügen.
2. Cover, Songtitel, Interpret, Label und Veröffentlichungsdatum eintragen, dazu die Hörprobe als Audiodatei.
3. Link A und Link B mit Ziel, Beschriftung und Icon belegen - ohne Beschriftung wird ein Button bewusst nicht ausgegeben.
4. Unter Overlay Stil, Position und Icon des Play-Knopfs wählen; die Hintergrund-Unschärfe nutzt automatisch das Cover.

Wenn etwas nicht erscheint

• Kein Abspielen-Button an einem Titel? Dann fehlt dort die Audiodatei. Die Zeile wird trotzdem mit Cover und Text ausgegeben.
• Der Promo Song erscheint gar nicht? Er braucht mindestens einen Songtitel, ein Cover, eine Audiodatei oder Link A - komplett leer blendet er sich aus.
• Die Dauer bleibt auf --:--? Entweder ist die Spalte Dauer ausgeschaltet, oder der Browser kommt an die Metadaten der Datei nicht heran, was bei Dateien von einer fremden Domain vorkommt. Trag die Dauer dann von Hand ein.
• Der Abspielen-Button der Trackliste zeigt sich erst beim Überfahren - das ist so gewollt, damit die Liste ruhig bleibt. Auf Touch-Geräten steht er dauerhaft sichtbar.
• Ein Link-Button fehlt? Ohne Beschriftung wird er nicht ausgegeben. Ziele mit javascript: oder data: verwirft das Element bewusst.
• Eigenes CSS greift nicht mehr? Die Zustandsklasse des laufenden Titels heißt seit 1.0.0 .tg-is-playing statt .is-playing.