Matthias Scharwies: Gesucht: urheberrechtsfreie Adventslieder

Beitrag lesen

Servus!

Lieber Matthias,

das Beispiel einer Playlist

auf dem Desktop sieht das ganz nett aus:

Abbildung einer Bedienoberfläche für einen Medienplayer: Kreis mit Symbol zum Abspielen in der Mitte. Darunter zwei Zeitangaben für verstrichene und gesamte Abspielzeit. Darunter zwei Pfeile für zurück und vor und zwischen ihnen das Wort Titel als Platzhalter für den Titel des abzuspielenden Musikstücks.

Danke! Ja, das ist das Problem, wnen man erst nur den Player hat und der als Minimalbeispiel die Seite füllen soll!

Durch diese Idee mit dem Kreis ist das auf einem Smartphone aber sehr bildschirmfüllend. Insbesondere die Bedienelemente für die Playlist machen sich bei längeren Titeln ungünstig. Auch die Abspielzeit wirkt gestalterisch unentschlossen, weil sie leicht links unterhalb der Kreislinie positioniert ist.

Vorschläge

  • Die Abspielzeit kommt in den Kreis hinein unter das Symbol zur Steuerung.
    Abbildung einer Bedienoberfläche für einen Medienplayer: Kreis mit Symbol zum Abspielen in der Mitte. Unter dem Symbol mittig zwei Zeitangaben für verstrichene und gesamte Abspielzeit.
  • Der Kreis schrumpft auf etwa 2/3.
    Abbildung einer Bedienoberfläche für einen Medienplayer: Kreis mit Symbol zum Abspielen in der Mitte. Unter dem Symbol mittig zwei Zeitangaben für verstrichene und gesamte Abspielzeit.
  • Für die Steuerung der Playlist die Buttons für vor und zurück unten und oben anbringen. Bei breiten Viewports kann dann eine media query gerne die Buttons rechts und links platzieren.

So mach ich's! Bzw. kleiner ohne Media query.

  • Die Link-Liste für die Audio-Dateien selbst wirken auf den ersten Blick wie Bedienelemente der Playlistensteuerung. Als ich dann aber im Browser das native Playerelement seitenfüllend hatte, war mir klar, dass ich die Wiki-Seite verlassen hatte. Deswegen: Playlist ist eine Liste (<ol>), deren <li>-Elemente jeweils einen Button enthalten, der die jeweilige Audio-Datei direkt startet, gefolgt von einem Link auf die Quelle mit dem Linktext „Quelle“.

Ja, die ul mit den Links muss weg und durch eine ol im Player ersetzt werden! Das ist ja der Komfort des Players (oder einer Lightbox), Medien nicht in einer leeren Seite des Browsers zu genießen.

Wenn man die Wiedergabe angehalten hat, dann auf den vor- oder zurück-Button klickt, dann startet der jeweils nächste oder vorherige Titel in der Liste, das Symbol des Bedienfeldes für Play/Pause passt sich aber noch nicht an.

Hoffentlich ab morgen! Jetzt muss ich aber wieder was anderes machen!

Herzliche Grüße

Matthias Scharwies

--
Was ist eine Signatur?