pl_   Eine oder mehrere Audio-Playlists für Webseiten

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.

 

<fieldset class="pl_playlist">

Klassik   bereit ist Nr. 1

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

Nationalhymnen   bereit ist Nr. 1

<fieldset class="pl_playlist">

1. Deutschland Hymne
2. Europa Hymne

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.