Météo
Un week-end ensoleillé sur la majeure partie du pays
Les températures resteront douces pour la saison, avec quelques nuages en fin de journée sur le littoral atlantique. La semaine prochaine s'annonce plus fraîche.
À quoi sert Boutodio ?
Boutodio est un web component qui s'insère dans n'importe quelle page HTML avec une seule balise,
<boutodio-play>. Il affiche un bouton de lecture, le titre de l'article, le temps écoulé et une barre
de progression. Un clic, et la version audio de l'article démarre.
Il a été conçu pour les sites de presse et pour les personnes qui ont des difficultés à lire : malvoyance, dyslexie, fatigue visuelle, ou simplement l'envie d'écouter plutôt que de lire. Il se pilote entièrement au clavier, annonce son état aux lecteurs d'écran, et propose des réglages partagés par tous les boutons de la page : vitesse, volume, enchaînement automatique des articles, couleurs contrastées et zoom.
De nombreuses voix de grande qualité, naturelles et expressives, sont disponibles chez différents fournisseurs de synthèse vocale, en français comme dans d'autres langues. Boutodio lit le fichier audio qu'on lui donne, quelle qu'en soit l'origine.
- Une balise, zéro dépendance. Le composant embarque son HTML, son CSS et son lecteur audio.
- Accessible. Focus visible, rôle bouton, progression annoncée, raccourcis clavier.
- Adaptable. La taille suit la police, les couleurs suivent quelques variables CSS.
- Un seul lecteur à la fois. Lancer un bouton met les autres en pause.
Format presse
La taille compacte, telle qu'on la trouve sous le titre d'un article sur le site d'un journal. Le bouton se glisse entre le chapô et le texte sans prendre plus de place qu'une ligne de métadonnées.
Culture
Le festival de la lecture à voix haute ouvre ses portes samedi
Pendant trois jours, comédiens et auteurs feront entendre des textes classiques et contemporains dans les bibliothèques de la ville. L'entrée est libre.
Sport
Plus de dix mille coureurs au marathon de la ville
Le vainqueur a bouclé le parcours en deux heures et douze minutes, sous un ciel dégagé et devant un public nombreux.
Économie
Les commerces de centre-ville retrouvent des couleurs
Après plusieurs années difficiles, le nombre de boutiques ouvertes a progressé de trois pour cent en un an, selon la chambre de commerce.
Le même bouton, en fond plein
Sur un fond coloré, le bouton reprend simplement les couleurs inversées.
Format intermédiaire
Une taille de lecture confortable pour une liste d'articles, un sommaire de journal ou une page dédiée à l'audio.
Grand format, pour les difficultés de lecture
La taille utilisée sur audio.vocalepresse.com : un bouton très large, un titre en gros caractères, et des couleurs fortement contrastées choisies parmi les combinaisons recommandées pour les personnes malvoyantes. Tout est lisible de loin et cliquable sans précision.
Blanc sur fond bleu Vocale Presse
Texte jaune sur fond noir
Texte noir sur fond jaune
Texte bleu sur fond beige
Réglages partagés
Le composant compagnon <boutodio-setup> expose les préférences de lecture. Elles sont
mémorisées dans le navigateur et s'appliquent immédiatement à tous les boutons. Cliquez sur une ligne puis
utilisez les flèches ↑ ↓ pour changer la valeur. Le bouton ci-dessous suit le thème de
couleurs choisi, comme le ferait une page entière sur Vocale Presse.
Thème choisi par l'utilisateur
Raccourcis clavier sur un bouton
| Touche | Action |
|---|---|
| Espace ou Entrée | Lecture / pause |
| → / ← | Avancer / reculer de 10 secondes |
| Ctrl + → / ← | Avancer / reculer de 30 secondes |
| ↑ / ↓ | Accélérer / ralentir la lecture |
| Clic sur la barre | Se déplacer dans l'article |
Intégration
Chargez le script en defer (ou en module ES), posez la balise, indiquez le fichier
audio et le titre. La taille suit la propriété font-size de l'élément, les couleurs suivent
quelques variables CSS.
<script src="js/boutodio.js" defer></script>
<boutodio-play
src="audio/article"
article-title="Écouter cet article"
style="font-size: 14px">
</boutodio-play>
Par défaut, le fichier audio n'est jamais servi en clair : le composant le reçoit encodé, comme sur Vocale
Presse. C'est ainsi que fonctionnent les boutons de cette page. Pour lire un MP3 ordinaire, ajoutez l'attribut
plain à la balise.
boutodio-play {
display: block;
--textColor: #265283; /* couleur du bouton, du texte et du focus */
--textBackground: #ffffff; /* couleur de l'icône lecture / pause */
--fill-color: #265283; /* partie écoutée de la barre */
--empty-color: #b0c7dd; /* partie restante de la barre */
/* --overlay-color: #1a3a5c; fond de la zone lue, sinon --empty-color */
--outline-min: 2px; /* épaisseur du contour de focus */
--outline-ratio: .12em;
--outline-max: 8px;
}