Démo en direct · lancez le premier, puis faites défiler
/00 · Brief
Un témoignage, un extrait de podcast, une ambiance sonore. C'est le lecteur des grands formats (ukraine-mines…), sorti du dossier pour être réutilisé partout, avec une nouveauté : l'onde dessinée en canvas, cliquable pour se déplacer dans l'audio. Le balisage reste compatible avec les lecteurs déjà en ligne.
/01 · Intégration
audio-player.css et audio-player.js, sans dépendance.
Un bloc <div class="ll-audio" data-audio-player> par piste.
Le titre, la durée affichée et le src de la balise <audio>. Pour l'onde, ajoutez la classe ll-audio--wave.
/02 · Personnalisation
Carte sombre par défaut, ll-audio--light pour un fond blanc, data-brand="dh" pour la DH.
Un bouton de vitesse (1×, 1,5×, 2×) est facultatif. L'onde se dessine à partir de pics fournis dans data-peaks
(le plus rapide), sinon elle est calculée depuis le fichier audio au chargement.
/03 · Mini-lecteur
Ajoutez data-sticky au lecteur : quand l'audio joue et que le lecteur sort de l'écran, une version compacte
s'accroche en bas à droite (pleine largeur sur mobile). Lecture et pause, temps écoulé, barre cliquable,
et le titre ramène au lecteur d'origine. La croix ou la touche Échap ferment le mini-lecteur et arrêtent l'audio.
Il s'efface de lui-même dès qu'on revient au lecteur dans la page. Essayez avec la première démo, puis faites défiler.
/04 · Sous le capot
Un seul lecteur joue à la fois : lancer une piste met les autres en pause. La barre et l'onde sont des slider
pilotables au clavier (flèches, Début, Fin, Espace). Le canvas se redessine en haute définition sur les écrans Retina et au
redimensionnement. En fin de lecture, un événement llaudio:ended permet d'enchaîner sur autre chose.
/05 · Dans le zip