Spotify-Klon – Web-Musikplayer

1046 TheDoc

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

12 October 2025

Facebook-UI-Mockup – HTML-Beispiel

15 September 2024

CodePen – Blumen zeichnen mit Greensock

22 November 2024

Landing Page – HUAWEI MateBook X Pro

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Spotify Clone</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <nav class="sidebar">
      <div class="sidebar-header">
        <img src="https://storage.googleapis.com/pr-newsroom-wp/1/2018/11/Spotify_Logo_CMYK_Green.png" alt="Spotify Logo" class="spotify-logo"/>
      </div>
      <ul class="sidebar-nav">
        <li class="active">
          <span class="icon">
            
            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"><path fill="#1db954" d="M3 10.5l9-7 9 7V20a1 1 0 0 1-1 1h-5v-5h-6v5H4a1 1 0 0 1-1-1V10.5z"/></svg>
          </span> Start
        </li>
        <li>
          <span class="icon">
            
            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#b3b3b3" stroke-width="2"/><path stroke="#b3b3b3" stroke-width="2" stroke-linecap="round" d="M20 20l-3-3"/></svg>
          </span> Suche
        </li>
        <li>
          <span class="icon">
            
            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2" stroke="#b3b3b3" stroke-width="2"/><path stroke="#b3b3b3" stroke-width="2" d="M7 4v16"/></svg>
          </span> Bibliothek
        </li>
      </ul>
      <button class="new-playlist-btn">
        <span class="icon">
          
          <svg width="18" height="18" fill="none" viewBox="0 0 24 24"><rect x="10" y="4" width="4" height="16" fill="#fff"/><rect x="4" y="10" width="16" height="4" fill="#fff"/></svg>
        </span>
        Neue Playlist
      </button>
      <div class="playlist-section">
        <h3>Playlists</h3>
        <ul>
          <li>
            <span class="icon">
              <svg width="18" height="18" fill="none" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#1db954"/></svg>
            </span>
            Meine Lieblingssongs
          </li>
          <li>
            <span class="icon">
              <svg width="18" height="18" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#b3b3b3"/></svg>
            </span>
            Chill Vibes
          </li>
          <li>
            <span class="icon">
              <svg width="18" height="18" fill="none" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="3" fill="#fff"/></svg>
            </span>
            Workout
          </li>
        </ul>
      </div>
      <div class="sidebar-footer">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="user-avatar"/>
        <span class="username">Max Mustermann</span>
        <span class="username" style="display:none;">TheDoc</span>
        <span class="icon settings-icon">
          <svg width="20" height="20" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#b3b3b3"/><path stroke="#b3b3b3" stroke-width="2" d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.09a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        </span>
      </div>
    </nav>
    <div class="main-content">
      <header>
        <div class="header-left">
          <button class="nav-arrow">←</button>
          <button class="nav-arrow">→</button>
        </div>
        <input type="text" id="search" placeholder="Suche nach Songs, Künstlern..." />
        <div class="header-right">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="user-avatar header-avatar"/>
          <span class="username" style="display:none;">TheDoc</span>
          <span class="icon">
            
            <svg width="22" height="22" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#b3b3b3"/><path stroke="#b3b3b3" stroke-width="2" d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.09a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
      </header>
      <main>
        <section class="playlist-banner">
          <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=400&q=80" alt="Playlist Cover" class="playlist-cover"/>
          <div class="playlist-info">
            <h2>Top Hits 2024</h2>
            <p>Die besten Songs des Jahres – regelmäßig aktualisiert. Perfekt für jede Stimmung!</p>
          </div>
        </section>
        <section class="song-list">
          <h2>Entdecke Musik</h2>
          <ul id="songs">
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" data-artist="Ed Sheeran" data-title="Shape of You">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/4/45/Divide_cover.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Shape of You</strong>
                <span>Ed Sheeran</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" data-artist="The Weeknd" data-title="Blinding Lights">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/0/09/The_Weeknd_-_After_Hours.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Blinding Lights</strong>
                <span>The Weeknd</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" data-artist="Dua Lipa" data-title="Levitating">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/0/0b/Dua_Lipa_-_Future_Nostalgia_%28Official_Album_Cover%29.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Levitating</strong>
                <span>Dua Lipa</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" data-artist="Imagine Dragons" data-title="Believer">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/0/0a/Imagine_Dragons_Evolve.jpg" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Believer</strong>
                <span>Imagine Dragons</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3" data-artist="Billie Eilish" data-title="bad guy">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/7/7e/Billie_Eilish_-_When_We_All_Fall_Asleep%2C_Where_Do_We_Go%3F.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>bad guy</strong>
                <span>Billie Eilish</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3" data-artist="Mark Ronson ft. Bruno Mars" data-title="Uptown Funk">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/2/2c/Mark_Ronson_-_Uptown_Special.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Uptown Funk</strong>
                <span>Mark Ronson ft. Bruno Mars</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3" data-artist="Lady Gaga" data-title="Poker Face">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/6/6e/Lady_Gaga_-_The_Fame.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Poker Face</strong>
                <span>Lady Gaga</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3" data-artist="Queen" data-title="Bohemian Rhapsody">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Bohemian_Rhapsody.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Bohemian Rhapsody</strong>
                <span>Queen</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-9.mp3" data-artist="Adele" data-title="Hello">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/8/85/Adele_-_25_%28Official_Album_Cover%29.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Hello</strong>
                <span>Adele</span>
              </div>
            </li>
            <li data-src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-10.mp3" data-artist="Luis Fonsi ft. Daddy Yankee" data-title="Despacito">
              <button class="song-play-btn">
                <svg width="24" height="24" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
              </button>
              <img src="https://upload.wikimedia.org/wikipedia/en/2/2c/Luis_Fonsi_-_Vida.png" alt="Cover" class="cover"/>
              <div class="song-info">
                <strong>Despacito</strong>
                <span>Luis Fonsi ft. Daddy Yankee</span>
              </div>
            </li>
          </ul>
        </section>
      </main>
      <footer>
        <div id="player-bar">
          <div class="player-section player-left">
            <img id="player-cover" src="https://via.placeholder.com/56x56/333/fff?text=♪" alt="Cover" class="cover"/>
            <div class="player-songinfo">
              <div id="player-title">Wähle einen Song</div>
              <div id="player-artist"></div>
            </div>
            <button id="like-btn" title="Gefällt mir">
              <svg width="20" height="20" viewBox="0 0 24 24"><path id="like-heart" d="M12 21s-7-4.35-7-10a5 5 0 0 1 9-3.33A5 5 0 0 1 19 11c0 5.65-7 10-7 10z" fill="none" stroke="#b3b3b3" stroke-width="2"/></svg>
            </button>
          </div>
          <div class="player-section player-center">
            <div class="player-controls">
              <button id="shuffle-btn" title="Shuffle">
                <svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 4l16 16M4 20l16-16" stroke="#b3b3b3" stroke-width="2" fill="none"/></svg>
              </button>
              <button id="prev-btn" title="Vorheriges Lied">
                <svg width="24" height="24" viewBox="0 0 24 24"><path fill="#b3b3b3" d="M6 12V7l8.5 5L6 17v-5zm10-5v10h2V7h-2z"/></svg>
              </button>
              <button id="play-pause" class="main-play-btn">
                <svg id="play-icon" width="36" height="36" viewBox="0 0 24 24"><polygon fill="#fff" points="5,3 19,12 5,21"/></svg>
                <svg id="pause-icon" width="36" height="36" viewBox="0 0 24 24" style="display:none"><rect x="6" y="4" width="4" height="16" fill="#fff"/><rect x="14" y="4" width="4" height="16" fill="#fff"/></svg>
              </button>
              <button id="next-btn" title="Nächstes Lied">
                <svg width="24" height="24" viewBox="0 0 24 24"><path fill="#b3b3b3" d="M18 12V7l-8.5 5L18 17v-5zm-10-5v10h-2V7h2z"/></svg>
              </button>
              <button id="repeat-btn" title="Repeat">
                <svg width="20" height="20" viewBox="0 0 24 24"><path d="M17 1l4 4-4 4M21 5H7a4 4 0 0 0 0 8h1" stroke="#b3b3b3" stroke-width="2" fill="none"/><path d="M7 23l-4-4 4-4M3 19h14a4 4 0 0 0 0-8h-1" stroke="#b3b3b3" stroke-width="2" fill="none"/></svg>
              </button>
            </div>
            <div class="player-progress">
              <span id="current-time">0:00</span>
              <div class="progress-container" title="Ziehe für andere Stelle">
                <input type="range" id="progress" value="0" min="0" max="100">
                <div id="progress-bar"></div>
              </div>
              <span id="duration">0:00</span>
            </div>
          </div>
          <div class="player-section player-right">
            <button id="queue-btn" title="Warteschlange">
              <svg width="20" height="20" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="2" fill="#b3b3b3"/><rect x="3" y="11" width="12" height="2" fill="#b3b3b3"/><rect x="3" y="16" width="8" height="2" fill="#b3b3b3"/></svg>
            </button>
            <button id="devices-btn" title="Geräte">
              <svg width="20" height="20" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="13" rx="2" fill="none" stroke="#b3b3b3" stroke-width="2"/><rect x="8" y="3" width="8" height="2" fill="#b3b3b3"/></svg>
            </button>
            <button id="miniplayer-btn" title="Miniplayer">
              <svg width="20" height="20" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" fill="none" stroke="#b3b3b3" stroke-width="2"/><rect x="15" y="13" width="4" height="2" fill="#b3b3b3"/></svg>
            </button>
            <button id="fullscreen-btn" title="Vollbild">
              <svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 4h6V2H2v8h2V4zm16 0v6h2V2h-8v2h6zm0 16h-6v2h8v-8h-2v6zM4 20v-6H2v8h8v-2H4z" fill="#b3b3b3"/></svg>
            </button>
            <div class="player-volume">
              <button id="mute-btn" title="Stumm">
                <svg id="volume-on" width="20" height="20" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3z" fill="#b3b3b3"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06A4.978 4.978 0 0 0 16.5 12z" fill="#b3b3b3"/></svg>
                <svg id="volume-off" width="20" height="20" viewBox="0 0 24 24" style="display:none"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06A4.978 4.978 0 0 0 16.5 12z" fill="#b3b3b3"/><path d="M3 9v6h4l5 5V4L7 9H3z" fill="#b3b3b3"/><line x1="19" y1="5" x2="5" y2="19" stroke="#b3b3b3" stroke-width="2"/></svg>
              </button>
              <input type="range" id="volume" min="0" max="1" step="0.01" value="1" title="Lautstärke">
            </div>
            <audio id="audio"></audio>
          </div>
        </div>
        <div class="footer-links">
          <a href="#">Datenschutz</a>
          <a href="#">Impressum</a>
          <a href="#">Cookies</a>
          <a href="#">Support</a>
          <a href="#">Community</a>
        </div>
      </footer>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

CSS

body {
  background: #181818;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
}

.container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  background: #000;
  color: #b3b3b3;
  width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  min-height: 100vh;
}

.sidebar-header {
  padding: 32px 24px 16px 24px;
}

.spotify-logo {
  width: 120px;
  margin-bottom: 10px;
}

.sidebar-nav {
  list-style: none;
  padding: 0 0 0 24px;
  margin: 0;
}

.sidebar-nav li {
  padding: 12px 0;
  font-size: 1.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.2s;
}

.sidebar-nav li.active,
.sidebar-nav li:hover {
  color: #1db954;
}

.icon {
  font-size: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.new-playlist-btn {
  margin: 18px 24px 0 24px;
  background: #1db954;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 18px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.new-playlist-btn:hover {
  background: #1ed760;
}

.playlist-section {
  padding: 24px;
}

.playlist-section h3 {
  color: #fff;
  font-size: 1em;
  margin-bottom: 10px;
}

.playlist-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playlist-section ul li {
  font-size: 0.98em;
  color: #b3b3b3;
  padding: 6px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.playlist-section ul li:hover {
  color: #fff;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid #282828;
  margin-top: auto;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  color: #fff;
  font-size: 1em;
  flex: 1;
}

.settings-icon {
  cursor: pointer;
  margin-left: auto;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, #222 0%, #181818 100%);
}

header {
  background: transparent;
  padding: 24px 32px 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  gap: 8px;
}

.nav-arrow {
  background: #181818;
  border: none;
  color: #b3b3b3;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2em;
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.2s, color 0.2s;
}

.nav-arrow:hover {
  background: #282828;
  color: #fff;
}

#search {
  background: #282828;
  border: none;
  border-radius: 20px;
  color: #fff;
  padding: 10px 18px;
  font-size: 1em;
  width: 260px;
  outline: none;
  margin: 0 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.playlist-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  background: linear-gradient(90deg, #1db954 0%, #181818 100%);
  border-radius: 18px;
  margin: 18px 0 32px 0;
  padding: 24px 32px;
  box-shadow: 0 2px 16px #1db95422;
}

.playlist-cover {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 12px #0008;
}

.playlist-info h2 {
  margin: 0 0 8px 0;
  font-size: 2em;
  color: #fff;
}

.playlist-info p {
  margin: 0;
  color: #e0e0e0;
  font-size: 1.1em;
}

main {
  padding: 10px 32px 120px 32px;
}

.song-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.song-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #282828;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.song-list li:hover {
  background: #232323;
}

.song-list li.playing {
  background: #282828;
  border-left: 4px solid #1db954;
}

.song-play-btn {
  background: #1db954;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  left: -48px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  box-shadow: 0 2px 8px #1db95444;
}

.song-list li:hover .song-play-btn {
  opacity: 1;
}

.cover {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px #0008;
}

.song-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.song-info strong {
  color: #fff;
  font-size: 1.1em;
}

.song-info span {
  color: #b3b3b3;
  font-size: 0.95em;
}

footer {
  position: fixed;
  left: 260px;
  right: 0;
  bottom: 0;
  background: #181818;
  z-index: 10;
  box-shadow: 0 -2px 12px #000a;
  padding: 0;
}

#player-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 0 24px;
  gap: 12px;
  background: #181818;
  border-top: 1px solid #232323;
}

.player-section {
  display: flex;
  align-items: center;
  min-width: 0;
}

.player-left {
  flex: 1.5;
  min-width: 0;
  gap: 16px;
}

.player-songinfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 180px;
}

#player-title {
  font-weight: bold;
  color: #fff;
  font-size: 1.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#player-artist {
  color: #b3b3b3;
  font-size: 0.98em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#like-btn {
  background: none;
  border: none;
  margin-left: 8px;
  cursor: pointer;
  transition: transform 0.2s;
  padding: 6px;
}
#like-btn.liked svg path {
  stroke: #1db954;
  fill: #1db954;
  transition: fill 0.2s, stroke 0.2s;
}
#like-btn:active {
  transform: scale(1.2);
}

.player-center {
  flex: 2.5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.main-play-btn {
  background: #fff;
  color: #181818;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  box-shadow: 0 2px 8px #1db95444;
  border: none;
  transition: background 0.2s, color 0.2s;
}
.main-play-btn:hover {
  background: #1db954;
  color: #fff;
}

.player-controls button {
  background: none;
  border: none;
  color: #b3b3b3;
  font-size: 1.3em;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.2s;
}
.player-controls button.active,
.player-controls button:hover {
  color: #1db954;
}

.player-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  width: 100%;
  max-width: 480px;
}

.progress-container {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 18px;
}

#progress {
  width: 100%;
  accent-color: #1db954;
  background: transparent;
  z-index: 2;
  cursor: pointer;
  height: 4px;
}

#progress-bar {
  position: absolute;
  left: 0; top: 7px; height: 4px;
  background: #1db954;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
  width: 0%;
  transition: width 0.1s linear;
}

.player-right {
  flex: 1.5;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  max-width: 120px;
}

#volume {
  width: 70px;
  accent-color: #1db954;
}

#mute-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  display: flex;
  align-items: center;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 0 32px 12px 0;
  font-size: 0.95em;
}

.footer-links a {
  color: #b3b3b3;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: #1db954;
}

@media (max-width: 900px) {
  footer {
    left: 0;
  }
  #player-bar {
    flex-direction: column;
    height: auto;
    gap: 8px;
    padding: 8px 4px;
  }
  .player-section {
    width: 100%;
    justify-content: center;
  }
  .player-left, .player-right {
    justify-content: center;
  }
  .player-center .player-progress #progress {
    width: 120px;
  }
}

@media (max-width: 600px) {
  #player-bar {
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px;
  }
  .player-section {
    flex-direction: row;
    gap: 6px;
  }
  .player-songinfo {
    max-width: 90px;
  }
  .player-center .player-progress #progress {
    width: 60px;
  }
}

JS

import React, { useState, useEffect } from 'react';
import SongList from './SongList';
import Player from './Player';

// Sample songs (use royalty-free audio URLs)
const songs = [
  {
    title: 'Sample Song 1',
    artist: 'Artist 1',
    url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
  },
  {
    title: 'Sample Song 2',
    artist: 'Artist 2',
    url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'
  }
];

function App() {
  const [currentSong, setCurrentSong] = useState(songs[0]);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [searchTerm, setSearchTerm] = useState('');
  const [isShuffle, setIsShuffle] = useState(false);
  const [isRepeat, setIsRepeat] = useState(false);

useEffect(() => {
    const audio = document.getElementById('audio');
    audio.src = currentSong.url;

const playPauseBtn = document.getElementById('play-pause');
    playPauseBtn.innerHTML = isPlaying ? '❙❙' : '▶'; // Pause or Play symbol

const currentSongSpan = document.getElementById('current-song');
    currentSongSpan.textContent = `${currentSong.title} – ${currentSong.artist}`;

const playerCover = document.getElementById('player-cover');
    playerCover.src = currentSong.cover;

const songsList = document.querySelectorAll('#songs li');
    highlightSong(songsList, currentIndex);

const audioEndedHandler = () => {
      playPauseBtn.innerHTML = '▶';
      setIsPlaying(false);
      if (currentIndex < songs.length - 1) {
        loadSong(currentIndex + 1);
      }
    };

const audioPlayHandler = () => {
      setIsPlaying(true);
      playPauseBtn.innerHTML = '❙❙';
    };

const audioPauseHandler = () => {
      setIsPlaying(false);
      playPauseBtn.innerHTML = '▶';
    };

const audioTimeUpdateHandler = () => {
      if (audio.duration) {
        const progress = document.getElementById('progress');
        progress.value = (audio.currentTime / audio.duration) * 100;

const currentTimeSpan = document.getElementById('current-time');
        const durationSpan = document.getElementById('duration');
        currentTimeSpan.textContent = formatTime(audio.currentTime);
        durationSpan.textContent = formatTime(audio.duration);
      }
    };

audio.addEventListener('ended', audioEndedHandler);
    audio.addEventListener('play', audioPlayHandler);
    audio.addEventListener('pause', audioPauseHandler);
    audio.addEventListener('timeupdate', audioTimeUpdateHandler);

return () => {
      audio.removeEventListener('ended', audioEndedHandler);
      audio.removeEventListener('play', audioPlayHandler);
      audio.removeEventListener('pause', audioPauseHandler);
      audio.removeEventListener('timeupdate', audioTimeUpdateHandler);
    };
  }, [currentSong, isPlaying, currentIndex]);

document.querySelectorAll('.username').forEach(el => {
    if (el.textContent === 'Max Mustermann') {
      el.title = 'TheDoc';
    }
  });

// Player/Spotify-UI-Logik
  const songs = document.querySelectorAll('#songs li');
  const audio = document.getElementById('audio');
  const playPauseBtn = document.getElementById('play-pause');
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  const shuffleBtn = document.getElementById('shuffle-btn');
  const repeatBtn = document.getElementById('repeat-btn');
  const currentSongSpan = document.getElementById('current-song');
  const playerCover = document.getElementById('player-cover');
  const playerTitle = document.getElementById('player-title');
  const playerArtist = document.getElementById('player-artist');
  const likeBtn = document.getElementById('like-btn');
  const likeHeart = document.getElementById('like-heart');
  const muteBtn = document.getElementById('mute-btn');
  const volumeOn = document.getElementById('volume-on');
  const volumeOff = document.getElementById('volume-off');
  const progress = document.getElementById('progress');
  const progressBar = document.getElementById('progress-bar');
  const currentTimeSpan = document.getElementById('current-time');
  const durationSpan = document.getElementById('duration');
  const volumeSlider = document.getElementById('volume');
  const playIcon = document.getElementById('play-icon');
  const pauseIcon = document.getElementById('pause-icon');
  const songPlayBtns = document.querySelectorAll('.song-play-btn');

let currentSrc = '';
  let isPlaying = false;
  let currentIndex = -1;
  let isShuffle = false;
  let isRepeat = false;

// Easter Egg: Zeige "TheDoc" im Tooltip, wenn User-Avatar geklickt wird
  document.querySelectorAll('.user-avatar').forEach(el => {
    el.addEventListener('click', () => {
      el.title = 'TheDoc';
      setTimeout(() => { el.title = ''; }, 2000);
    });
  });

function highlightSong(index) {
    songs.forEach((li, i) => {
      li.classList.toggle('playing', i === index);
    });
  }

songs.forEach((li, idx) => {
    li.addEventListener('click', (e) => {
      if (e.target.closest('.song-play-btn')) return;
      loadSong(idx, true);
    });
  });

songPlayBtns.forEach((btn, idx) => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      loadSong(idx, true);
    });
  });

playPauseBtn.addEventListener('click', () => {
    if (currentIndex === -1) {
      loadSong(0, true);
      return;
    }
    if (audio.paused) {
      audio.play().catch(() => {});
    } else {
      audio.pause();
    }
  });

audio.addEventListener('play', () => {
    isPlaying = true;
    playIcon.style.display = 'none';
    pauseIcon.style.display = '';
  });

audio.addEventListener('pause', () => {
    isPlaying = false;
    playIcon.style.display = '';
    pauseIcon.style.display = 'none';
  });

prevBtn.addEventListener('click', () => {
    if (isShuffle) {
      playRandomSong();
    } else if (currentIndex > 0) {
      loadSong(currentIndex - 1, true);
    }
  });

nextBtn.addEventListener('click', () => {
    if (isShuffle) {
      playRandomSong();
    } else if (currentIndex < songs.length - 1) {
      loadSong(currentIndex + 1, true);
    } else if (isRepeat) {
      loadSong(0, true);
    }
  });

shuffleBtn.addEventListener('click', () => {
    isShuffle = !isShuffle;
    shuffleBtn.classList.toggle('active', isShuffle);
  });

repeatBtn.addEventListener('click', () => {
    isRepeat = !isRepeat;
    repeatBtn.classList.toggle('active', isRepeat);
  });

audio.addEventListener('ended', () => {
    if (isRepeat) {
      audio.currentTime = 0;
      audio.play();
    } else if (isShuffle) {
      playRandomSong();
    } else if (currentIndex < songs.length - 1) {
      loadSong(currentIndex + 1, true);
    } else {
      audio.pause();
      audio.currentTime = 0;
    }
  });

audio.addEventListener('timeupdate', () => {
    if (audio.duration) {
      progress.value = (audio.currentTime / audio.duration) * 100;
      currentTimeSpan.textContent = formatTime(audio.currentTime);
      durationSpan.textContent = formatTime(audio.duration);
      progressBar.style.width = `${progress.value}%`;
    }
  });

progress.addEventListener('input', () => {
    if (audio.duration) {
      audio.currentTime = (progress.value / 100) * audio.duration;
      progressBar.style.width = `${progress.value}%`;
    }
  });

// Like-Button Animation
  likeBtn.addEventListener('click', () => {
    likeBtn.classList.toggle('liked');
  });

// Lautstärke/Mute
  muteBtn.addEventListener('click', () => {
    if (audio.muted) {
      audio.muted = false;
      volumeOn.style.display = '';
      volumeOff.style.display = 'none';
    } else {
      audio.muted = true;
      volumeOn.style.display = 'none';
      volumeOff.style.display = '';
    }
  });

volumeSlider.addEventListener('input', () => {
    audio.volume = volumeSlider.value;
    if (audio.volume == 0) {
      audio.muted = true;
      volumeOn.style.display = 'none';
      volumeOff.style.display = '';
    } else {
      audio.muted = false;
      volumeOn.style.display = '';
      volumeOff.style.display = 'none';
    }
  });

// Suche: Filtert Songs nach Titel oder Künstler
  const searchInput = document.getElementById('search');
  searchInput.addEventListener('input', (e) => {
    const term = e.target.value.toLowerCase();
    songs.forEach(li => {
      const title = li.getAttribute('data-title').toLowerCase();
      const artist = li.getAttribute('data-artist').toLowerCase();
      if (title.includes(term) || artist.includes(term)) {
        li.style.display = '';
      } else {
        li.style.display = 'none';
      }
    });
  });

function playRandomSong() {
    let next;
    do {
      next = Math.floor(Math.random() * songs.length);
    } while (next === currentIndex && songs.length > 1);
    loadSong(next, true);
  }

function formatTime(sec) {
    sec = Math.floor(sec);
    const min = Math.floor(sec / 60);
    const s = sec % 60;
    return min + ':' + (s < 10 ? '0' : '') + s;
  }

return (
    <div style={{ background: '#181818', color: '#fff', minHeight: '100vh', fontFamily: 'sans-serif' }}>
      <h1 style={{ padding: 20 }}>Spotify Clone</h1>
      <input
        id="search"
        type="text"
        placeholder="Search for songs or artists..."
        value={searchTerm}
        onChange={handleSearchChange}
        style={{ margin: '20px', padding: '10px', borderRadius: '5px', border: 'none' }}
      />
      <SongList songs={songs} setCurrentSong={setCurrentSong} />
      <Player
        song={currentSong}
        isPlaying={isPlaying}
        setIsPlaying={setIsPlaying}
        onPlayPause={handlePlayPause}
        onPrev={handlePrev}
        onNext={handleNext}
        onProgressChange={handleProgressChange}
        onVolumeChange={handleVolumeChange}
      />
      <audio id="audio" />
    </div>
  );
}

export default App;

Empfohlen

Facebook-UI-Mockup – HTML-Beispiel

CodePen – Blumen zeichnen mit Greensock

Landing Page – HUAWEI MateBook X Pro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS