Karl-Heinz Osmer


Webseiten und Softwareentwicklung Südhessen


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


 

<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)

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.


HTML Audio/Video Events

am 24.02.2022 von w3schools.com abgerufen.

abort Fires when the loading of an audio/video is aborted

canplay Fires when the browser can start playing the audio/video

canplaythrough Fires when the browser can play through the audio/video without stopping for buffering

durationchange Fires when the duration of the audio/video is changed

emptied Fires when the current playlist is empty

ended Fires when the current playlist is ended

error Fires when an error occurred during the loading of an audio/video

loadeddata Fires when the browser has loaded the current frame of the audio/video

loadedmetadata Fires when the browser has loaded meta data for the audio/video

loadstart Fires when the browser starts looking for the audio/video

pause Fires when the audio/video has been paused

play Fires when the audio/video has been started or is no longer paused

playing Fires when the audio/video is playing after having been paused or stopped for buffering

progress Fires when the browser is downloading the audio/video

ratechange Fires when the playing speed of the audio/video is changed

seeked Fires when the user is finished moving/skipping to a new position in the audio/video

seeking Fires when the user starts moving/skipping to a new position in the audio/video

stalled Fires when the browser is trying to get media data, but data is not available

suspend Fires when the browser is intentionally not getting media data

timeupdate Fires when the current playback position has changed

volumechange Fires when the volume has been changed

waiting Fires when the video stops because it needs to buffer the next frame