Neu Music Player
Un lecteur audio de 300 px en relief : pochette ronde de 120 px qui tourne comme un disque (un tour en 8 s) uniquement pendant la lecture, barre de progression creusée qui avance, précédent et suivant qui repartent au début et préviennent votre code. Pilote un élément audio s'il en trouve un.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le boîtier .neu-player (300 px, padding: 24px, border-radius: 24px) sort de la matière #e0e5ec par deux ombres de 10 px / 20 px. Dedans, de haut en bas : la pochette .neu-player-art, disque de 120 px en dégradé #8b5cf6 → #ec4899 avec une note de musique blanche, en relief (6 px / 12 px) ; le titre (15,2 px, #374151) et l'artiste ; une rigole de progression de 6 px creusée (ombres internes 2 px / 4 px) dont le remplissage reprend le dégradé ; trois boutons ronds en relief, 40 px pour précédent et suivant, 52 px pour lecture, qui passent en ombres internes quand on appuie (:active).
La pochette porte en permanence l'animation neuSpin (un tour en 8 s, linéaire, en boucle) mais en animation-play-state: paused ; la classe .playing sur le lecteur la passe en running. La rotation reprend donc là où elle s'était arrêtée, comme un disque qu'on relâche. Le JavaScript (une boucle sur tous les .neu-player de la page) relie les boutons : lecture bascule .playing et aria-pressed ; sans élément <audio>, la progression avance de 0,25 s tous les quarts de seconde sur une durée lue dans data-duration (180 s par défaut) et repart à zéro au bout. Précédent et suivant remettent la progression au début puis émettent neuplayer:prev ou neuplayer:next sur le lecteur : c'est là que votre code change de piste. Si le lecteur contient un <audio>, le script le lance et l'arrête, cale la barre sur currentTime / duration et émet neuplayer:next à la fin du morceau (mesuré dans Chromium et Firefox avec un fichier de 4 s).
Le lecteur est livré avec son script, et sans aucun onclick en ligne : un simple attribut sur le bouton lecture ferait tourner la pochette, mais la barre resterait figée et précédent/suivant ne feraient rien (essai : 88,2 px avant et après 1,2 s de lecture). Le script, lui, fait avancer la barre et émet des événements que votre code peut écouter, et il reste compatible avec une politique de sécurité qui interdit les scripts en ligne. Les trois boutons ne contiennent qu'une icône : ils portent donc type="button", un aria-label (« Morceau précédent », « Lecture », « Morceau suivant ») et un anneau de focus violet. .neu-player-scene porte sa surface (#e0e5ec, padding: 40px) comme toute la famille.
Accessibilité
- Boutons nommés et clavier : mesuré dans Chromium et Firefox, Tab parcourt précédent, lecture, suivant ; Entrée et Espace les activent ; le bouton lecture annonce son état par
aria-pressed(« Lecture, bouton, enfoncé »). Le focus est marqué paroutline: 2px solid #8b5cf6(3,3:1). L'icône du bouton lecture, elle, ne change pas en « pause » : seularia-pressedet la rotation de la pochette disent que la musique joue — voir Personnaliser pour basculer l'icône. - prefers-reduced-motion absent du code : la pochette tourne en continu pendant la lecture, même quand le système demande moins d'animation. Ajoutez
@media (prefers-reduced-motion: reduce) { .neu-player-art { animation: none } }: la lecture reste signalée pararia-pressedet la barre qui avance. - Contraste : le titre
#374151mesure 8,1:1 sur la matière, mais l'artiste#9ca3af(12,5 px) seulement 2,0:1 — passez-le en#4b5563(6,0:1), comme dans les scènes. Les icônes grises#6b7280(3,8:1) et violette (3,3:1) passent le seuil de 3:1 des éléments graphiques ; les contours des boutons n'existent que par les ombres (1,5:1). - Barre de progression : c'est un
divsans rôle, non manipulable. Pour un vrai lecteur, ajoutezrole="progressbar"avecaria-valuenow, ou remplacez-la par un curseurinput type="range"si l'on doit pouvoir avancer dans le morceau (voir Neu Slider, fx-0315).
Compatibilité navigateur
CSS : box-shadow portées et internes, @keyframes sur transform: rotate(), animation-play-state, :focus-visible. JavaScript : CustomEvent (Chrome 15, Firefox 11, Safari 6), HTMLMediaElement facultatif. Mesuré dans Chromium, Firefox et WebKit (Playwright) : rotation en lecture seulement, progression qui avance, précédent/suivant qui remettent à zéro et émettent leur événement, aucune erreur console. audio.play() n'est autorisé qu'après un geste de l'utilisateur : c'est le cas ici, puisque la lecture part d'un clic.
Les versions données sont celles de :focus-visible ; avant, tout fonctionne sauf l'anneau de focus au clavier. Sans JavaScript, le lecteur s'affiche mais ne réagit plus : pochette immobile, boutons sans effet.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="neu-player-scene">
<div class="neu-player">
<!-- facultatif : data-duration="180" sur .neu-player (durée en secondes), ou <audio src="…"></audio> -->
<div class="neu-player-art"><svg viewBox="0 0 24 24" aria-hidden="true">…</svg></div>
<div class="neu-player-info">
<h4>Midnight Drive</h4>
<p>Synthwave FM</p>
</div>
<div class="neu-player-progress"><div class="neu-player-progress-fill"></div></div>
<div class="neu-player-controls">
<button type="button" class="neu-player-btn neu-player-btn--prev" aria-label="Morceau précédent">…</button>
<button type="button" class="neu-player-btn neu-player-btn--play" aria-label="Lecture" aria-pressed="false">…</button>
<button type="button" class="neu-player-btn neu-player-btn--next" aria-label="Morceau suivant">…</button>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Neu Music Player, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Brancher un vrai son (HTML — <audio src="…"> dans .neu-player) |
aucun audio : progression simulée sur data-duration | Placez un <audio src="morceau.mp3" preload="metadata"></audio> n'importe où dans le lecteur : lecture, pause, progression et fin de morceau le suivent sans autre code. |
Changer de piste (JS — événements neuplayer:prev / neuplayer:next) |
retour au début du morceau, rien d'autre | player.addEventListener('neuplayer:next', () => { audio.src = pistes[++i]; h4.textContent = titres[i]; audio.play(); }). L'événement remonte (bubbles) : un seul écouteur sur document sert plusieurs lecteurs. |
Icône lecture / pause (HTML + CSS — .neu-player.playing) |
icône lecture fixe | Ajoutez un second SVG (deux barres) dans le bouton et basculez-les : .neu-player .ico-pause, .neu-player.playing .ico-play { display: none } .neu-player.playing .ico-pause { display: block }. |
Vitesse de rotation (CSS — animation: 8s linear … neuSpin) |
un tour en 8 s | 1,8 s donne la vitesse réelle d'un 33 tours ; au-delà de 12 s, la rotation ne se remarque plus. |
Pochette (CSS — .neu-player-art, dégradé #8b5cf6 → #ec4899) |
disque dégradé avec note | Remplacez le fond par l'image de l'album : background: url(pochette.jpg) center / cover, et retirez le SVG. Gardez le border-radius: 50% pour l'effet disque. |
FAQ
<audio>, c'est l'interface seule, avec une progression simulée sur data-duration. Ajoutez un <audio> dans .neu-player et le script le pilote : lecture et pause au bouton, barre calée sur la position réelle, événement neuplayer:next en fin de morceau.neuplayer:prev : à votre code de charger la piste précédente s'il y en a une.
