Eine retro-futuristische Spotify DJ-Webseite mit Synthwave/Vaporwave-Ästhetik. Spiele deine Lieblingssongs mit einer animierten Vinyl-Schallplatte und Neon-Effekten ab!
- 🎸 Spotify-Integration: Spiele Songs direkt von deinem Spotify-Account
- 💿 Animierte Vinyl-Schallplatte: Realistische Plattenanimation während der Wiedergabe
- 🎨 Retro-futuristische Ästhetik: Neon-Farben, Synthwave-Design, animierte Sterne
- 🔍 Song-Suche: Finde und spiele jeden Song auf Spotify
- 🎛️ Vollständige Steuerung: Play/Pause, Skip, Lautstärke, Fortschrittsbalken
- 📱 Responsive Design: Funktioniert auf Desktop und Mobilgeräten
- Gehe zu Spotify Developer Dashboard
- Melde dich mit deinem Spotify-Account an (erstelle einen kostenlosen Account, falls nötig)
- Klicke auf "Create app"
- Fülle das Formular aus:
- App name: My Personal DJ (oder einen Namen deiner Wahl)
- App description: Personal DJ web player
- Redirect URI:
http://localhost:8080(wichtig!) - API/SDKs: Wähle "Web API" und "Web Playback SDK"
- Akzeptiere die Terms of Service und klicke auf "Save"
- In der App-Übersicht findest du deine Client ID - kopiere diese
- Öffne die Datei
app.js - Ersetze in Zeile 2
'YOUR_SPOTIFY_CLIENT_ID'mit deiner Client ID:const CLIENT_ID = 'deine_client_id_hier';
- Falls du einen anderen Port verwendest, passe auch
REDIRECT_URIan:const REDIRECT_URI = 'http://localhost:8080';
Die Webseite muss über einen Webserver laufen (nicht mit file://).
# Python 3
python3 -m http.server 8080
# Python 2
python -m SimpleHTTPServer 8080# Installation (einmalig)
npm install -g http-server
# Server starten
http-server -p 8080php -S localhost:8080- Installiere die Extension "Live Server" in VS Code
- Rechtsklick auf
index.html→ "Open with Live Server" - Stelle sicher, dass der Port 8080 ist (oder passe
REDIRECT_URIan)
- Öffne deinen Browser und gehe zu
http://localhost:8080 - Klicke auf "CONNECT SPOTIFY"
- Melde dich mit deinem Spotify-Account an und erlaube den Zugriff
- Du wirst zurück zur App weitergeleitet
- Wichtig: Stelle sicher, dass Spotify auf mindestens einem Gerät läuft:
- Öffne die Spotify Desktop-App oder Mobile App
- Oder nutze die Spotify Web Player Integration
- Suche nach Songs und klicke darauf, um sie abzuspielen!
- Song suchen: Gib einen Song, Artist oder Album-Namen in die Suchleiste ein und drücke Enter
- Song abspielen: Klicke auf einen Song in den Suchergebnissen
- Play/Pause: Klicke auf den großen Play/Pause-Button
- Skip: Nutze die Vor/Zurück-Buttons
- Lautstärke: Ziehe den Lautstärke-Slider
- Fortschritt: Klicke auf den Fortschrittsbalken, um zu einer Position zu springen
Die Spotify Web Playback SDK funktioniert nur mit Spotify Premium-Accounts. Nutzer mit Free-Accounts können sich anmelden, aber keine Songs abspielen.
Die App funktioniert am besten in:
- Google Chrome (empfohlen)
- Microsoft Edge
- Firefox
- Safari (mit Einschränkungen)
"Keine Wiedergabe möglich"
- Stelle sicher, dass du Spotify Premium hast
- Öffne die Spotify-App auf einem anderen Gerät
- Prüfe, ob die Client ID korrekt ist
- Prüfe in der Browser-Konsole auf Fehler (F12)
"Verbindung fehlgeschlagen"
- Stelle sicher, dass der Redirect URI im Spotify Dashboard korrekt ist
- Prüfe, ob der Server auf dem richtigen Port läuft
- Lösche den Browser-Cache und versuche es erneut
"Song wird nicht abgespielt"
- Warte ein paar Sekunden nach dem Login
- Klicke auf Play/Pause, um die Wiedergabe zu starten
- Prüfe die Lautstärke-Einstellungen
Die Webseite nutzt eine retro-futuristische Synthwave-Ästhetik mit:
- Typografie: Orbitron (Titel), Rajdhani (Text)
- Farbpalette: Neon Cyan, Magenta, Purple
- Animationen: Rotierende Vinyl, pulsierende Neon-Effekte, animierter Sternen-Hintergrund
- Effekte: Glow-Effekte, Equalizer-Bars, Tonearm-Bewegung
Dieses Projekt ist für persönliche und Bildungszwecke gedacht.
Viel Spaß beim DJing! 🎧✨