Clon de Spotify: reproductor de música web

Abrir en el editor Publica tu código

Recomendado

3 February 2025

<!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;

Clon de Spotify: reproductor de música web

Recomendado

Un código de zegarekdawida

El safari de microinteracción

Un código de BENE

HTML

CSS

JS

Recomendado

Un código de zegarekdawida

El safari de microinteracción

Un código de BENE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS