Modelo HTML/CSS de player de música semelhante ao Spotify

1050 klein

Abrir no Editor Video Publique Seu Código

Modelo HTML/CSS de player de música semelhante ao Spotify

Recomendado

14 July 2025

GESTÃO ESCOLAR

16 October 2025

Exemplo de elemento de carregamento animado em CSS

10 February 2026

Sugestão de recurso: Música de Hollow Knight para Titan Speed

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Lecteur Musical</title>
    <style>
        /* Styles de base pour la maquette similaire à Spotify */
        body {
            font-family: 'Montserrat', sans-serif; /* Police similaire à Spotify */
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #121212; /* Couleur de fond principale */
            color: #b3b3b3; /* Couleur de texte par défaut */
            overflow: hidden; /* Empêche le défilement du corps principal */
        }

.app-container {
            display: flex;
            flex: 1; /* Prend l'espace restant en hauteur */
            overflow: hidden; /* Empêche le défilement du conteneur de l'application */
        }

header {
            background-color: #000; /* Couleur d'arrière-plan de l'en-tête */
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px; /* Hauteur fixe de l'en-tête */
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            z-index: 10;
        }

.header-left {
            display: flex;
            align-items: center;
        }

.app-logo {
            font-size: 24px;
            font-weight: bold;
            color: #1DB954; /* Vert Spotify */
            margin-right: 20px;
        }

.search-bar {
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid #333;
            background-color: #282828;
            color: #fff;
            width: 300px;
            box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
        }

.user-profile .profile-btn {
            background-color: #282828;
            color: #fff;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

.user-profile .profile-btn:hover {
            background-color: #3a3a3a;
        }

nav.sidebar {
            width: 250px;
            background-color: #000;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 5px rgba(0,0,0,0.5);
            overflow-y: auto; /* Permet le défilement de la barre latérale */
            scrollbar-width: thin; /* Pour Firefox */
            scrollbar-color: #535353 #000; /* Pour Firefox */
        }

/* Styles de la barre de défilement pour WebKit */
        nav.sidebar::-webkit-scrollbar {
            width: 8px;
        }

nav.sidebar::-webkit-scrollbar-track {
            background: #000;
        }

nav.sidebar::-webkit-scrollbar-thumb {
            background-color: #535353;
            border-radius: 4px;
            border: 2px solid #000;
        }

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

.sidebar ul li {
            margin-bottom: 5px;
        }

.sidebar ul li a {
            display: flex; /* Pour aligner l'icône et le texte */
            align-items: center;
            padding: 10px 20px;
            color: #b3b3b3;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

.sidebar ul li a i {
            margin-right: 10px;
            font-size: 20px;
        }

.sidebar ul li a:hover, .sidebar ul li a.active {
            background-color: #282828;
            color: #fff;
        }

.sidebar h3 {
            color: #fff;
            padding: 0 20px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.create-playlist-btn {
            background-color: #1DB954;
            color: #fff;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            margin: 0 20px 20px 20px; /* Ajusté pour être centré avec le padding */
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.create-playlist-btn i {
            margin-right: 8px;
        }

.create-playlist-btn:hover {
            background-color: #178a40;
        }

.main-content {
            flex: 1; /* Prend l'espace restant en largeur */
            background-color: #121212;
            padding: 20px;
            overflow-y: auto; /* Permet le défilement du contenu principal */
            scrollbar-width: thin; /* Pour Firefox */
            scrollbar-color: #535353 #121212; /* Pour Firefox */
        }

/* Styles de la barre de défilement pour WebKit */
        .main-content::-webkit-scrollbar {
            width: 8px;
        }

.main-content::-webkit-scrollbar-track {
            background: #121212;
        }

.main-content::-webkit-scrollbar-thumb {
            background-color: #535353;
            border-radius: 4px;
            border: 2px solid #121212;
        }

.content-section {
            margin-bottom: 40px;
        }

.content-section h2 {
            color: #fff;
            font-size: 28px;
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }

.grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
        }

.card {
            background-color: #181818;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            transition: background-color 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.card:hover {
            background-color: #282828;
        }

.card img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }

.card h3 {
            color: #fff;
            font-size: 16px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%; /* S'assure que le texte ne déborde pas */
        }

.card p {
            color: #b3b3b3;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

.playlists-list-detailed .playlist-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            cursor: pointer;
            margin-bottom: 10px;
        }

.playlists-list-detailed .playlist-item:hover {
            background-color: #282828;
        }

.playlist-item img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 15px;
            object-fit: cover;
        }

.playlist-info h4 {
            color: #fff;
            margin: 0;
            font-size: 18px;
        }

.playlist-info p {
            color: #b3b3b3;
            margin: 0;
            font-size: 14px;
        }

footer.player-bar {
            background-color: #282828;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90px; /* Hauteur fixe de la barre de lecture */
            box-shadow: 0 -2px 5px rgba(0,0,0,0.5);
            z-index: 10;
        }

.current-song-info {
            display: flex;
            align-items: center;
            width: 25%;
        }

.current-song-info img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

.song-details h4 {

Recomendado

GESTÃO ESCOLAR

Exemplo de elemento de carregamento animado em CSS

Sugestão de recurso: Música de Hollow Knight para Titan Speed

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS