Éditeur — Lecteur Vocal Web
Construis ton bloc + lecteur (Marche / Arrêt + progression) aperçu en direct, export HTML prêt à coller.

Réglages

Les réglages sont regroupés en accordéons. Le panneau possède un scroll interne si besoin.

Live: ON
Structure
Inclure un texte de démonstration dans la page générée
Pratique pour tester le lecteur. Tu peux le désactiver si tu veux uniquement le widget.

Le code généré est un fichier HTML autonome. Pour l’intégrer dans une page existante, copie le bloc + le script (voir section Export).

Style du bloc
100%

Le curseur gère la transparence (alpha) du fond.

12%

Bordure = épaisseur + style + couleur + transparence.

Les presets ajustent automatiquement le fond + bordure + couleur du texte du bloc.

Les thèmes ajustent aussi des tailles (padding, boutons, barre de progression) + quelques options, pas seulement les couleurs.

100%

Le champ CSS reste disponible (rgba, hsl, var(), etc.).

Couleurs au format hex (ex: #151b30) ou CSS (rgba / hsl). Si tu tapes une valeur invalide, le navigateur ignorera.

Lecteur vocal

La barre de progression est précise si le navigateur émet des événements onboundary. Sinon, on estime.

Affichage (bouton + accordéon)

En mode accordéon, la page affiche uniquement le bouton d’ouverture au chargement.

Afficher le texte
Désactive pour un bouton “icône seule”.
Afficher l’icône ▶
Icône intégrée sans dépendances.
20%
100%
14%
Rayon (px)
Texte (px)
Padding (Y / X)
Y X
Ombre (CSS)

Le panneau s’ouvre/ferme au clic. En fermeture, la lecture est stoppée automatiquement.

Boutons
20%
18%
14%
Y X

Astuce : augmente taille/padding pour l’accessibilité (mobile).

Afficher des icônes (▶ / ■)
Option visuelle. Le code généré reste sans dépendances.
Indicateur de lecture
95%
7
85%
Export

Si tu choisis “seulement widget + script”, tu peux coller le code dans ta page (par exemple dans un <div>), sans remplacer ta page entière.

Boutons en haut : Télécharger / Copier. Le code est aussi visible à droite.

Aperçu en temps réel
Le lecteur marche directement ici (dans l’iframe).
Code HTML généré
Prêt. Raccourci : Ctrl + S pour télécharger
Contenu libre : cartes, sections, applis, texte. Cette zone est volontairement large.