Erweiterte Spezifikation: Webbasierte Spotify-Style MP3-Play...

Prompt

Erweiterte Spezifikation: Webbasierte Spotify-Style MP3-Player App (Einzelne HTML-Datei) Erstelle eine vollständige, webbasierte Audio-Player-App als eine einzelne HTML-Datei (HTML, CSS, JavaScript inline, Tailwind CSS via CDN, music-metadata-browser via CDN). Der Player soll folgende Funktionen und Design-Anforderungen erfüllen. Alle sichtbaren Texte, Buttons, Labels und Beschriftungen sind in Englisch. 0. Globale Architektur & Persistenz 0.1 Zustands-Persistenz (über Reload & Reboot) Alle nutzerbezogenen Daten werden clientseitig persistiert: localStorage: Lautstärke, Mute-Status, letzter gespielter Song + Position, Wiedergabemodus, Shuffle-History, EQ-Presets, Custom-EQ-Werte, Sleep-Timer-Wert, Theme (Akzentfarbe, OLED-Schwarz), API-Keys, Last.fm Session-Token, Playback-Speed, Sortierung, Lyrics-Toggle, Dislike-Reset-Datum, Balance/Mono, Output-Device-ID. IndexedDB: Queue-Inhalte (mit Position), Playlists (Ordner-Handles + Songs), Favoriten, Dislikes (mit Ablaufdatum „Mitternacht"), Play Counts, Hörzeit-Statistiken (Day/Week/Month/All), Lyrics-Cache, Waveform-Cache, Song-Metadaten-Fingerprints. Ordner-Handles: In Chromium-basierten Browsern via File System Access API persistent speichern (überlebt Reboot, benötigt nur Re-Grant). In Firefox Fallback: Ordner bei jedem Start neu wählen, aber alle anderen Daten werden trotzdem wiederhergestellt. 0.2 Toast-Benachrichtigungssystem Oben rechts erscheint ein kleines abgerundetes Toast-Panel (max. 3 gestapelt). Auto-dismiss nach 3s mit Fade-out. Beispiele: „Added to Queue", „Song Liked ", „Disliked until tomorrow", „Folder imported", „Scrobble sent", „Lyrics not found". Icons je nach Aktion. 0.3 Tab-Titel & dynamisches Favicon Tab-Titel: 🎵 [Song Title] – [Artist] während Wiedergabe, sonst Music Player. Favicon: Wird zur Laufzeit aus dem Cover-Thumbnail generiert (Canvas → Data-URL → link[rel=icon]). 0.4 Unterstützte Audioformate .mp3, .flac, .m4a, .ogg, .wav. Metadaten (ID3, Vorbis, MP4-Atoms) werden via music-metadata-browser einheitlich extrahiert. Cover-Fallback mit Gradient + Initialen. 0.5 Drag & Drop Ordner-Import Drop-Zone über gesamten Viewport. Beim Drag-Over: blauer Ring + „Drop folder to import"-Text. Chromium: persistierbares Handle. Firefox: Fallback auf <input webkitdirectory>. 1. Ordnerauswahl & Playlist-Management 1.1 Import Add-Folder-Button im Playlist-Panel (File System Access API, Fallback <input webkitdirectory>). Drag & Drop (siehe 0.5). Ordner → Playlist (Name = Ordnername, via Kontextmenü umbenennen). Automatisches Einlesen aller unterstützten Formate, Tag-Extraktion, Cover-Fallback. 1.2 Playlist-Panel (linke Seitenleiste) Hamburger-Button toggle, Slide-Animation, Overlay mit Blur + pointer-events: none auf dem Rest, Klick-auf-Overlay schließt Panel. Drei-Punkte-Menü pro Playlist: Rename, Delete, Duplicate. Playlists bleiben persistent in IndexedDB (mit File-Handle-Referenz). 1.3 Verhalten bei Playlist-Wechsel Aktueller Song bleibt aktiv, wenn in neuer Playlist vorhanden (smooth Scroll zum Eintrag). Andernfalls: Stop + zufälliger Song aus neuer Playlist. Suchfilter wird bei Wechsel zurückgesetzt. 2. Layout (Spotify-Vibe, dunkles Theme) 2.1 Top-Bar Von links nach rechts: Hamburger (Playlist-Panel Toggle) Aktueller Playlist-Name (groß) Sort-Button (NEU): Dropdown mit „Sort by: Title / Artist / Album / Duration / Date Added" + Ascending/Descending Toggle. Position stabil. Suchfeld mit Live-Fuzzy-Filter (Tippfehler-Toleranz via Levenshtein), Treffer-Highlight in Songliste (fett + Akzentfarbe). X-Button zum Resetten. Theme-Switcher (NEU): Farb-Palette-Icon, Popover mit Farbkreis für Akzentfarbe + Toggle „OLED Black" (reines #000 Hintergrund). 2.2 Now-Playing-Bereich (zentral) Cover (groß), Titel, Künstler, Album. NEU – „Up Next"-Vorschau: Unter aktuellem Song erscheinen die nächsten 2 Songs (pre-rolled bei Shuffle, Queue-Songs haben Priorität) als kleine Zeilen mit Mini-Cover, Titel, Artist, Dauer. Klick → Song wird sofort abgespielt. Dynamische Cover-Farben: Durchschnittsfarbe des Covers wird als sanfter Gradient-Hintergrund (mit dunklem Overlay für Kontrast) über den Now-Playing-Bereich gelegt. Aktualisiert sich bei Songwechsel mit Fade. 2.3 Steuerungselemente Play/Pause, Skip Prev, Skip Next, Volume-Slider, Fortschrittsbalken (siehe 4.2). NEU darunter eine zweite Zeile: Playback-Speed-Dropdown (0.75x / 1x / 1.25x / 1.5x / 2x) Mini-Player-Button Settings-Button (links neben Volume, Position stabil) Queue-Button (unten rechts, wie gehabt) 2.4 Songliste Scrollbarer Container, fixe Höhe. Zeilenlayout: Cover-Thumb + Titel links, Artist/Album mittig (zentriert), Dauer rechts. Hover zeigt statt Dauer ein ⋮-Icon mit großer Hitbox. Kontextmenü mit: Play Now Play Next (NEU – schiebt Song direkt nach aktuellem in Queue) Add to Queue Add to Favorites / Remove Dislike / „Not today" (NEU – Song wird bis Mitternacht übersprungen, persistent) Song Details (NEU – öffnet Song-Detailseite, siehe Abschnitt 10) Interaktive Artist-Namen bleiben wie spezifiziert (Shift+Click = Suche). 3. Wiedergabemodi Normal, Smart Shuffle 2.0 (Default), Repeat One. Smart Shuffle 2.0: Zufall mit Gewichtung – selten gespielte Songs (niedriger Play Count) und lange nicht gehörte Songs haben höhere Chance. 4-Songs-Abstandsregel bleibt. Dislikes werden bis Mitternacht ausgeschlossen. Pre-Rolling: Die nächsten 2 Songs werden beim Songwechsel im Voraus gewürfelt und in der „Up Next"-Vorschau (2.2) angezeigt. Bei manuellem Skip oder Shuffle-Wechsel wird neu gewürfelt. Aktiver Modus wird grün (#1DB954) hervorgehoben. Buttons beeinflussen Layout anderer Controls nicht. 4. Steuerungselemente – Slider & Audio 4.1 Slider Große Hitboxen, Maus- + Touch-Drag. Fortschritt + Volume. 4.2 Waveform-Fortschrittsbalken (NEU – SoundCloud-Style) Statt linearem Balken wird die dekodierte Audio-Welle als SVG-Balkendiagramm angezeigt. Wird nur für aktuellen + nächsten Song via OfflineAudioContext im Web Worker berechnet und in IndexedDB gecacht. Fortschritt wird als „gefüllter" Teil der Welle dargestellt. 4.3 Playback-Speed (NEU) 0.75x – 2x via <audio>.playbackRate. Toggle „Preserve Pitch" (default an). Crossfade-Dauer wird an Tempo angepasst. 4.4 Crossfade 4 Sekunden Fade-out / Fade-in über Gain-Nodes, zwei Audio-Elemente. Aktiv in Normal, Smart Shuffle, Queue. Inaktiv bei Repeat-One. 4.5 Audio-Chain (Web Audio API) <audio> → Gain(Crossfade) → BiquadFilter-Kette (10-Band EQ) → Bass-Enhancer (Low-Shelf + Waveshaper) → Reverb (ConvolverNode mit synthetisch generierter Impulsantwort, Dry/Wet-Regler) → Stereo Balance (PannerNode) → Mono-Mix-Option (ChannelMerger) → Limiter (DynamicsCompressorNode gegen Clipping bei EQ-Boost) → setSinkId (Ausgabegerät, Chromium only, graceful Fallback) → Destination. Alle Effekte kompatibel mit Crossfade und zwei Audio-Elementen (Chain wird für beide parallel aufgebaut). 5. Queue-System (erweitert) Slide-Up-Animation aus Queue-Button, Overlay mit Blur, Schließen per X oder Overlay-Click. Drag & Drop Sortieren innerhalb der Queue (NEU). Hover → Dauer wird zu X (Remove). Play Next + Add to Queue aus Song-Kontextmenü (siehe 2.4). Cover-Fluganimationen (1/x-Kurve) bleiben wie spezifiziert. Wiedergabe-Priorität: Repeat One > Queue > Play Next Songs > Shuffle/Normal. 6. Now-Playing-Großansicht (Liquid Glass) Klick auf Cover → Fullscreen-Overlay mit Frosted-Glass (backdrop-filter: blur). Enthält: Cover, Song-Metadaten, alle Controls. NEU-Erweiterungen: Lyrics-Panel (umschaltbar rechts oder unter Cover): synchronisiert mitscrollend (siehe 5.1). Visualizer-Modus: Toggle für Fullscreen-Spektrum-Visualizer (AnalyserNode, 128 Bins, Balken in Akzentfarbe, 60 fps). Schließen per X oder Backdrop-Click mit Scale/Fade-Animation. 7. Lyrics-System (NEU) Lokale Tags: USLT-Frames (unsynced) aus ID3 direkt darstellen. LRCLIB-Fallback (lrclib.net): Kostenlose, offene API (kein Key nötig). Abfrage mit track_name, artist_name, album_name, duration. Synced Lyrics (LRC-Format) mit Zeitstempeln. Cache: Jeder Treffer wird dauerhaft in IndexedDB gespeichert. Song wird nur einmal angefragt, danach auch offline verfügbar. Display: Synced Lyrics scrollen automatisch mit (aktuelle Zeile fett + Akzentfarbe, andere ausgegraut). Unsynced Lyrics als einfacher Textblock. Toggle: In Settings deaktivierbar (Datenschutz-Hinweis). 8. Artist-Detailseite (erweitert) Wie spezifiziert (Liquid-Glass, Last.fm-Stats, lokale Songs, Similar Artists aus Playlist). NEU: Hörzeit-Statistik dieses Artists: Today / This Week / This Month / All Time (Kacheln). Most Played Songs dieses Artists (Top 5) als separate Liste. Navigation zwischen Artists bricht Wiedergabe nicht ab. 9. Settings-Panel (erweitert) Slide-Animation, Overlay-Logik wie gehabt. Drei Hauptbereiche + NEUE Sektionen: 9.1 API Key (Last.fm) Maskiertes Eingabefeld mit Auge-Icon + Save/Clear. 9.2 Equalizer 10-Band (60Hz–16kHz), vertikale Slider, Presets (Flat, Bass Boost, Treble, Vocal, Rock, Pop, Electronic, Loudness, Custom), animiertes Gliden der Slider bei Preset-Wechsel, dB-Werte, Reset-Button. Presets in localStorage. 9.3 Sleep Timer 1–100 min Slider + NEU: Toggle „After current song" (stoppt nach Songende statt nach Timer). Aktiver Timer = grüner Punkt am settings-Icon. 9.4 NEUE Settings-Sektionen Themes: Farbkreis für Akzentfarbe + OLED-Black-Toggle. Last.fm Scrobbling: Connect-Button (OAuth-Flow: Request Token → Authorize → Session Key in localStorage). Status-Anzeige. Auto-scrobble bei >50% oder 4min. track.updateNowPlaying bei Songstart. Lyrics: Toggle (enable/disable), Button „Clear lyrics cache" mit Toast-Feedback. Dislikes: Button „Reset all dislikes" (löscht „not today"-Markierungen). Audio Effects: Reverb (Room-Size-Slider + Dry/Wet), Bass Enhancer (Amount-Slider), Limiter (Threshold-Slider), Balance (L/R-Slider), Mono-Toggle. Output Device: Dropdown mit navigator.mediaDevices.enumerateDevices() (Audio-Ausgang), nur Chromium. Playback Speed Preset: Default-Wert + Pitch-Preservation-Toggle. 10. Song-Detailseite (NEU) Auslöser: Klick auf I im Song-Kontextmenü (2.4) oder auf Cover im Now-Playing. Liquid-Glass-Fullscreen-Overlay mit: Großes Cover, Titel, Artist(s), Album Technical Info: Bitrate (aus MP3-Header gelesen, VBR = Durchschnitt), Sample Rate, Channels, Dateigröße, Format, Hinzufügedatum Listening Stats: Play Count, Last Played, Total Listening Time, Favorite-Status ( Toggle), Dislike-Status All ID3 Tags: als scrollbare Liste (Key: Value) Actions: Play Now, Play Next, Add to Queue, Favorite, Dislike, Open Artist Page Schließen per X oder Backdrop-Click. 11. Hörzeit-Statistik (NEU) Globale Stats in Settings-Panel als eigener Tab: Today / This Week / This Month / This Year / All Time als große Kacheln. Top Artists (Top 10) der jeweiligen Zeitspanne. Top Songs (Top 10). Listening Streak (aufeinanderfolgende Tage mit Musik). Alle Daten in IndexedDB, persistiert über Reload/Reboot. 12. Keyboard-Shortcuts (NEU) Immer aktiv, außer bei Fokussierung von Input-Feldern (dann nur Esc zum Verlassen). Hilfe-Overlay via ?-Taste: Taste Aktion Space / K Play / Pause J -10 Sekunden L +10 Sekunden ← / → -10s / +10s (alternativ) ↑ / ↓ Volume +/- M Mute / Unmute S Shuffle-Modus wechseln R Repeat-Modus wechseln N Next Track P Previous Track / Suche fokussieren F Fullscreen Now-Playing-Overlay Q Queue öffnen/schließen Esc Overlay schließen ? Shortcut-Hilfe anzeigen 13. Mini-Player / Picture-in-Picture (NEU) Auslöser: -Button in Steuerungsleiste. Chromium: Picture-in-Picture API (videoRequestPictureInPicture) mit einem unsichtbaren <video>-Element, das Cover + Visualizer rendert. Immer-on-top, synchronisiert mit Main-Player. Firefox/Fallback: window.open() mit festen Dimensionen (300×400px), synchronisiert via BroadcastChannel oder shared localStorage Events. Inhalt: Cover, Titel, Artist, Play/Pause, Skip Prev/Next, Volume, Close-Button. Sync: Alle Änderungen (Song, Position, Volume) spiegeln sich in Main-Player und Mini-Player sofort. 14. Last.fm Scrobbling (NEU) Auth-Flow: auth.getToken → User autorisiert auf last.fm → auth.getSession → Session-Key in localStorage. track.updateNowPlaying: bei Songstart. track.scrobble: bei >50% Spieldauer oder ≥4 Minuten. Fehlerbehandlung: Stille via try/catch, Toast „Scrobble failed" bei Fehler. 15. Dynamische Cover-Farben (NEU) Canvas extrahiert beim Songwechsel die dominierende Farbe des Covers. Diese wird als sanfter Radial-Gradient-Hintergrund über den Now-Playing-Bereich und die Now-Playing-Großansicht gelegt, mit einem dunklen Overlay (opacity ~0.6) um Text-Kontrast zu garantieren. Farbwechsel mit 500ms Fade-Transition. 16. Technisches Setup Single HTML file, inline CSS/JS, Tailwind via CDN. Web Workers für: Audio-Dekodierung (Waveforms), Fuzzy-Search-Index, Cover-Farbextraktion. IndexedDB mit klarer Schema-Struktur (Stores: playlists, songs, queue, favorites, dislikes, playCounts, listeningStats, lyrics, waveforms, settings). Graceful Degradation für nicht-unterstützte APIs (setSinkId, PiP). Keine Demo-Songs, keine externen Lyrics-Dateien. Leichtgewichtig: soll auf alten Rechnern und schwachen Browsern flüssig laufen. Bitte liefere die komplette Lösung als eine einzelne HTML-Datei. Benutze inaudible der ganzen Seite KEINE Emojis! Erstelle eigene passende icons wenn gebraucht

A system prompt was added to support web rendering