Carte lecteur de musique

Une carte « en cours de lecture » avec une pochette qui tourne lentement et des boutons qui rebondissent au clic.

Réglages

Couleur principale#0071e3

Couleur secondaire#8ec5ff

Taille16px

Vitesse1x

Texte

Code

index.html

<article class="uv-cplay"><div class="cover"><i></i><b>◌</b></div><small>REPRODUCIENDO</small><h3>Soft Motion</h3><p>Nara Fields</p><div class="line"><i></i></div><footer><button>‹</button><button class="play">▶</button><button>›</button></footer></article>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Cartes

Carte inclinable 3D

CartesReact + Motion

Carte à halo lumineux

CartesReact + Motion

Widget météo et agenda

CartesReact + Motion

Carte à bordure lumineuse

CartesHTML + CSS

Carte qui se soulève

CartesHTML + CSS

Carte qui se retourne

CartesHTML + CSS

Carte au dégradé animé

CartesHTML + CSS

Carte à contenu révélé

CartesHTML + CSS

Où l’utiliser

Elle a sa place partout où la musique ou l'audio compte : le dernier single sur le site d'un groupe indé ou l'épisode à la une sur la page d'un podcast. Sous le capot, rien que du HTML et du CSS : une carte lecteur de musique avec une pochette en dégradé à teinter à vos couleurs.

Elle ne joue aucun son toute seule : reliez les boutons à un élément audio ou à votre lecteur, et faites avancer la barre de progression avec le temps réel. Remplacez la pochette abstraite par la vraie et gardez un titre qui tient sur une ligne.