Toast de cassette en lecture
Une cassette fait tourner ses bobines pendant la chanson ; le bouton la met en pause puis la relance.
Réglages
Code
<div class="uvq09-cst"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><span class="cs" aria-hidden="true"><span class="lb"><em>Mix été 86</em></span><span class="wd"><i class="r r1"></i><i class="r r2"></i></span></span><span class="tx"><small>En cours de lecture</small><b>Face A · Piste 3</b><span class="eq" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span></span><button type="button" class="pl" aria-label="Pause"><svg class="pa" viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="5" width="4" height="14" rx="1.2"/><rect x="14" y="5" width="4" height="14" rx="1.2"/></svg><svg class="py" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.5 4.8v14.4a.8.8 0 0 0 1.2.7l11.3-7.2a.8.8 0 0 0 0-1.4L8.7 4.1a.8.8 0 0 0-1.2.7z"/></svg></button></div></div>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 Notifications
Voir tout : NotificationsOù l’utiliser
Un avis de lecture en cours prend du caractère quand il ressemble à l'objet qui passait la musique autrefois. Cette cassette est en CSS pur : étiquette rayée, titre manuscrit et une fenêtre où deux bobines tournent pendant que la bande passe de l'une à l'autre grâce à une propriété personnalisée animée. Un petit égaliseur sautille à côté. Parfait pour la musique et la radio.
Les deux couleurs peignent les rayures de l'étiquette et la principale teinte aussi le libellé et l'égaliseur. La pause fige les bobines avec animation-play-state et met à jour le libellé du bouton pour les lecteurs d'écran, pour le piloter depuis un vrai élément audio.