Dewplayer

Player audio (puis vidéo) web accessible (RGAA / WCAG), léger (quelques Ko gzippé, zéro dépendance, uniquement du natif) et personnalisable. Web Component utilisable partout : HTML statique, WordPress, Vue, React…

🌐 dewplayer.fr — démos, documentation, configurateur de thème.

Installation

Via CDN :

<script type="module" src="https://cdn.jsdelivr.net/npm/@alsacreations/dewplayer"></script>

<dew-player src="episode.mp3" media-title="Épisode 12 — Les Web Components">
  <a href="episode.mp3" download>Télécharger l'épisode (MP3)</a>
</dew-player>

Via npm :

npm install @alsacreations/dewplayer

import '@alsacreations/dewplayer'

Le contenu du slot par défaut (ex. lien de téléchargement) reste visible si JavaScript est indisponible : amélioration progressive.

Attributs

Attribut	Rôle	Défaut
src	URL du média audio	—
media-title	Titre affiché	—
preload	none / metadata / auto	metadata
loop	Lecture en boucle	—
skip	Pas d'avance/recul rapide (secondes)	15
lang	Langue de l'UI (fr, en, extensible)	hérite du contexte, sinon fr
theme	classic / dark / minimal / auto (feuilles dans themes/)	—
storage-key	Mémorise position et volume (localStorage)	—
no-shadow	Rendu en light DOM	—

Pas d'attribut autoplay : le déclenchement automatique du son est non conforme (RGAA 4.10), il n'est volontairement pas proposé.

Événements

dew-play, dew-pause, dew-ended, dew-timeupdate (detail: { currentTime, duration }), dew-error. Tous bubbles et composed.

document.querySelector('dew-player').addEventListener('dew-ended', () => { … })

Méthodes et propriétés

play(), pause(), seek(seconds), currentTime, duration, volume, media (l'élément audio interne, pour les besoins avancés).

Slots

• défaut : fallback sans JavaScript (lien de téléchargement recommandé) ;
• transcript : transcription textuelle (RGAA 4.1), affichable via un bouton qui n'apparaît que si le slot est rempli.

Theming

Trois niveaux, du plus simple au plus fin :

/* 1. Custom properties (traversent le Shadow DOM) */
dew-player {
  --dew-accent: #7c2d8e;
  --dew-bg: #fff;
  --dew-fg: #1a1a1a;
  --dew-radius: 1rem;
  --dew-font: Georgia, serif;
}

/* 2. ::part() pour les surcharges fines */
dew-player::part(play-button) { border-radius: 50%; }

3. Thèmes prédéfinis : themes/classic.css (hommage au Dewplayer Flash), themes/dark.css (+ theme="auto" suit prefers-color-scheme), themes/minimal.css.

⚠️ Le thème par défaut respecte les contrastes AA (texte 4.5:1, composants 3:1). Si vous personnalisez les couleurs, vérifiez vos ratios — le configurateur sur dewplayer.fr le fait pour vous.

Accessibilité

• Pattern ARIA APG « media player » : vrais boutons, sliders role="slider" avec aria-valuetext vocalisé (« 2 minutes 5 secondes sur 48 minutes ») ;
• Clavier complet : ←/→ ±5 s, PageUp/PageDown ±15 s, Home/End, ↑/↓ pour le volume ;
• Annonces d'état (aria-live), focus toujours visible, cibles tactiles ≥ 44 px ;
• prefers-reduced-motion respecté ;
• Grille d'audit RGAA fournie : voir la documentation.

Développement

npm install
npm run dev     # démo locale (déposer un demo.mp3 dans public/)
npm test        # tests unitaires
npm run build   # build ESM + IIFE + types

Feuille de route — v2 « podcasts »

• Playlists : forme déclarative <dew-track> en HTML (indexable, fallback en liste de liens sans JavaScript) ou attribut playlist="episodes.json" — les deux alimentent le même modèle. UI en liste avec aria-current, épisodes marqués comme écoutés, enchaînement automatique, événement dew-trackchange.
• Pochettes : attribut artwork global et par piste, affichées dans le player et transmises à l'écran verrouillé.
• Media Session API : titre, pochette et contrôles piste précédente/suivante sur mobile, écouteurs et autoradio.
• Reprise fine : position mémorisée par épisode, dernier épisode retenu, vitesse de lecture persistée.
• v2.1 : chapitres (format JSON Podcasting 2.0 et/ou WebVTT) avec repères sur la barre de progression, partage horodaté (?t=754, lu au chargement), lien de téléchargement par épisode.
• Flux RSS : pas de lecture directe (CORS non fiable) — un convertisseur RSS → JSON sera fourni à part.

CI/CD

Le fichier .github/workflows/ci.yml définit le pipeline d'intégration continue GitHub Actions du projet.

Il se déclenche sur chaque push vers main et sur chaque pull request, puis exécute sur Ubuntu :

• Checkout du code
• Setup Node 22 avec cache npm
• npm ci — installation propre des dépendances
• npm test — tests unitaires + audit axe-core
• npm run build — build ESM + IIFE + types
• npm run size — vérification du poids du bundle