pl_   Eine oder mehrere Audio-Playlists für Webseiten

Typische Anwendungen sind Hörproben einer oder mehrerer CDs auf Websdeiten von Musikern, Chören, Orchestern, ...   Bei solchen statischen Webseiten kann man die Adressen der mp3-Dateien direkt in den HTML-Code einarbeiten, es ändert sich ja nichts.

Wenn Titel aus einer Datenbank ausgewählt werden, ergibt sich eine dynamische Webseite. Der Server liefert einen CSV-String und Javascript baut die Playlisten im Browser auf.

In dieser Studie arbeiten wir mit solchen variablen JS-Dateien. Da bleibt der HTML-Code unberührt.

So sieht es aus:

K L A S S I K

Playlist „Klassik“   bereit ist Nr. 1

1. Hörprobe Brahms, GLKN-Verbundorchester
2. Klezmer Fantasie (Rosenheck), Musikschule Kronshagen
3. Canon in D C (Pachelbel) Piano, Akkordeon, Xylofon, eigenes Arrangement

Die zugehörige CSV-Datei ist klassik.js

Nationalhymnen   bereit ist Nr. 1

H Y M N E N

1. Deutschland BRD - bundeswehr.de
2. Deutschland DDR
3. Europa - wikimedia.org
4. Frankreich
5. Российской Федерации - wikimedia.org
6. USA - nationalhymnen.eu

CSV-Daten: hymnen.js

Deine Titel hier eingeben und abspielen

Deine Playlist   bereit ist Nr. 1

[fieldset class="pl_playlist"]

Gib deine Titel und deren URL ein, getrennt durch das Zeichen ; - pro Titel eine Zeile. Dann [Playliste erstellen] drücken. Mit diesen Titeln kannst du testen: Hoch auf dem gelben Wagen;https://www.lieder-archiv.de/lieder/mp3/300175.mp3 Schifferlied;https://www.lieder-archiv.de/lieder/mp3/600035.mp3 Ade zur guten Nacht;https://www.lieder-archiv.de/lieder/mp3/300336.mp3 Playliste erstellen

Das HTML Audio-Element kann nur einen Titel abspielen, eine Playlist durchläuft mit Hilfe von Javascript alle Titel. Alle HTML- CSS- und Javascript-Bezeichnungen dieses Projekts beginnen mit pl_ und sollten damit NICHT in Konflikt kommen mit anderen Bezeichnungen der Webseite.

Zu diesem Projekt gehört

• eine oder mehrere Playlists als HTML-Code, z.B. Hörproben mehrerer CDs,
• die Datei pl_playlists.css für das Layout,
• die Datei pl_playlists.js für das Handling.

HTML

<fieldset class="pl_playlist">
  <legend><fieldset class="pl_playlist"></legend>
  <h3>Klassik</h3>
  <audio controls="" preload="none" src="https://www.glkn.de/media-glkn/audio/12-Brahms-KN.mp3" type="audio/mpeg"></audio>
  <ul>
    <li data-src=
    "https://www.glkn.de/media-glkn/audio/12-Brahms-KN.mp3"
    >Hörprobe Brahms, <a class=external href="https://www.glkn.de/glkn/aktuelles/verbundorchester/verbundorchester.php">GLKN-Verbundorchester</a></li>
    <li data-src=
    "https://www.musikschule-kronshagen.de/downloads/Musikschule-Kronshagen_live-in-concert-2010_1-01.mp3"
    >Klezmer Fantasie (Rosenheck), <a class=external href="https://www.musikschule-kronshagen.de/videos-und-hoerproben/hoerproben-klassik/">Musikschule Kronshagen</a></li>
  </ul>
</fieldset>

In den Containern [class="pl_playlist"] befinden sich das Audio-Element und eine Liste [ul, li] der Titel

Jede Position der Liste enthält das Data-Element [data-src=] mit der Web-Adresse der mp3-Datei.

Die Adresse der ersten mp3-Datei steht zusätzlich im Audio-Element, so kann zumindest dieser Titel ohne Javascript abgespielt werden.

CSS

Das Audio-Element wird auf width:100% gestreckt und mit einem roten Rahmen versehen. Der Rahmen wechselt per JS zu grün, wenn dieses Audio-Element ativ ist.

Javascript (JS)

Nachdem die Webseite vollständig geladen ist, baut sich JS Arrays auf, die die Elemente abbilden.

• 0 .. n pl_playlists mit je einem Audio-Element,
• pro pl_playlist 0 .. n Listen-Positionen. Der erste Titel in der ersten Playlist ist pl_playlist[0][0]
• Jede Listen-Position bekommt ein click-Event, um diesen Titel zu starten.
• Jedes Audio-Element bekommt drei Events:
  • play feuert bei Start und nach Beenden einer Pause. Drei Ursachen sind möglich:
    1. das Start-Symbol wurde aktiviert und die geladene mp3-Datei beginnt
    2. das Start-Symbol wurde aktiviert und die mp3-Datei wird nach einer Pause fortgesetzt
    3. der Titel (Text) wurde angeklickt.
    • Alle audio-Elemente der Webseite (auch außerhalb der Playlists) werden auf pause() geschaltet, ausgenommen das aktive Element.
    • Die audio-Elemente aller Playlists werden als passiv (Roter Rand) markiert.
    • Das aktive audio-Element wird als aktiv (grüner Rand) markiert.
    • Die Titel (Texte) aller Playlists werden auf font-weight:normal gesetzt,
    • der aktive Titel auf font-weight:bold.
  • pause feuert, wenn das audio-Element gestoppt wird.
    • es wird als passiv (roter Rand) markiert.
  • ended feuert, wenn die audio-Datei fertig ist
    • das audio-Element wird als passiv markiert (roter Rand),
    • der Titel (Text) auf font-weight:normal gestellt.
    • in einer Erweiterung könnte hier der nächste Titel derselben Playlist aktiviert werden.

HTML Audio/Video Events

am 24.02.2022 von w3schools.com abgerufen.