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.
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:
- das Start-Symbol wurde aktiviert und die geladene mp3-Datei beginnt
- das Start-Symbol wurde aktiviert und die mp3-Datei wird nach einer Pause fortgesetzt
- 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.
- play feuert bei Start und nach Beenden einer Pause. Drei Ursachen sind möglich:
HTML Audio/Video Events
am 24.02.2022 von w3schools.com abgerufen.