2.1 Grundstruktur des Players

Der Player ist innerhalb eines <main>-Elements eingebettet, das ein Hintergrundbild verwendet (aus dem ersten MP3-Cover entnommen). Er enthält drei Abschnitte:

• Anzeige des aktuell gewählten Songs (Titel, Künstler, Cover)
• Steuerelemente: Play, Nächstes Lied, Zufällige Wiedergabe, Download
• Playlist-Tabelle: Alle MP3s aus dem ausgewählten Verzeichnis

2.2 Playlist-Erzeugung aus MP3-Dateien

Die MP3-Dateien werden serverseitig mit mp3agic geladen. Pro Datei werden folgende Metadaten extrahiert:

• getTitle(): Liedtitel
• getArtist(): Interpret
• getAlbumImage(): Coverbild als Byte-Array

Falls kein Titel/Interpret vorhanden ist, werden Platzhalter wie "Unbekannter Künstler" angezeigt.

2.3 HTML-Aufbau der Playlist-Tabelle

Jede MP3-Datei erzeugt eine Tabellenzeile mit zwei Zellen:

• Linke Spalte: Entweder ein Mini-Coverbild (wenn vorhanden), oder einfach "1-10" Zählung bei einem Album.
• Rechte Spalte: Der Titel (als <h3>) und optional der Interpret bei Compilation-Alben.

<tr class="playlist-item" data-url=".../song.mp3">
  <td><img src="data:image/png;base64,..."></td>
  <td><h3>Titel<br><span>Titel - Artist</span></h3></td>
</tr>

Das data-url-Attribut wird später im JavaScript verwendet, um den Pfad zum Song bereitzustellen.

2.4 JavaScript: Interaktive Steuerung

Die Buttons und Playlist-Einträge sind mit EventListener verknüpft:

• #playAll: Spielt alle Songs nacheinander ab.
• #playNext, #playPrev: Navigation in der Liste.
• #playRandom: Zufällige Reihenfolge (mit Array-Shuffle).
• #downloadFile: Lädt den aktuell gewählten Song herunter.
• .playlist-item: Klick auf einen Song spielt diesen sofort ab.

Beim Abspielen wird das Album-Cover (falls vorhanden) als Hintergrundbild aktualisiert.

2.5 Zusätzliche visuelle Effekte

Das Album-Cover wird als Base64-encoded Bild auf einem Canvas gezeichnet, um die Transparenz anzupassen (z. B. opacity=0.3). Dadurch entsteht ein weicher Hintergrundeffekt.

Die Tabellenzellen erhalten außerdem eine zufällige Hintergrundfarbe, um die Seite dynamischer erscheinen zu lassen.

Fazit

Der Player ist komplett in JSP und JavaScript realisiert. Er nutzt serverseitige MP3-Verarbeitung und clientseitige Wiedergabe. Die Kombination aus MP3-Metadaten, dynamischer Playlist und visuellem Design ergibt eine benutzerfreundliche Audio-Anwendung für Webbrowser.