Personnalisation du lecteur VoiceDropper | Markup ou configuration JavaScript

VoiceDropper propose deux façons d’intégrer et personnaliser le lecteur audio :

Intégration markup (<voicedropper data-speech="...">) : le lecteur reprend automatiquement les réglages configurés dans VoiceDropper, y compris couleurs, labels et contrôles actifs.
Intégration JavaScript (new VoiceDropper(target, { ... })) : vous gardez un contrôle complet à l’exécution sur le style, les labels, les icônes, le sticky player, les options de lecture et le comportement du mode auto.

Méthodes d’intégration

Commencez par installer la bibliothèque VoiceDropper sur votre site. Ensuite, vous pouvez intégrer la synthèse vocale de l’une des façons suivantes :

1) Intégration markup

C’est la méthode la plus simple. Le lecteur s’initialise automatiquement et applique les réglages déjà configurés dans votre projet VoiceDropper.

<voicedropper data-speech="[YOUR_SPEECH_ID]"></voicedropper>

Choisissez cette approche si vous voulez un rendu cohérent sur plusieurs pages sans écrire de JavaScript supplémentaire.

2) Initialisation JavaScript

Utilisez JavaScript si vous avez besoin de plus de contrôle sur le rendu, les mises à jour runtime ou un comportement spécifique à la page.

const target = document.querySelector('#vd-target');

new VoiceDropper(target, {
  speech: '[YOUR_SPEECH_ID]'
});

VoiceDropper fusionne vos options avec les réglages par défaut : vous ne passez donc que ce que vous souhaitez surcharger.

Options JavaScript prises en charge

Options principales

Option	Type	Rôle
`speech`	string	Clé audio (Audio ID).
`stickyplayer`	boolean	Active ou désactive le mini-lecteur sticky.
`playspeed`	boolean	Active ou désactive le contrôle de vitesse.
`glass`	boolean	Active ou désactive le rendu glass.
`jumpSeconds`	number	Définit le saut des boutons avance/retour. Valeur par défaut : `10`.
`seekStep`	number	Ancien alias de `jumpSeconds`.
`playbackJump`	boolean	Ancien flag conservé pour compatibilité.

new VoiceDropper(target, {
  speech: '[YOUR_SPEECH_ID]',
  stickyplayer: true,
  playspeed: true,
  glass: true,
  jumpSeconds: 10
});

Personnalisation visuelle

L’objet style pilote le thème visuel du lecteur. Ces valeurs sont appliquées comme variables CSS internes.

Clés de style prises en charge

Clé	Rôle
`primary`	Couleur d’accent principale.
`background`	Couleur de fond de base du lecteur.
`foreground`	Couleur de texte et d’icônes.
`widget-background`	Fond explicite du widget.
`widget-foreground`	Couleur explicite des textes et icônes.
`widget-btn-background`	Fond du bouton principal.
`widget-btn-foreground`	Couleur de l’icône du bouton principal.
`seek-background`	Couleur de la piste de progression.
`seek-fill`	Couleur de la progression active.
`seek-thumb`	Couleur du curseur.
`visualizer`	Couleur de l’analyseur/visualiseur.

new VoiceDropper(target, {
  speech: '[YOUR_SPEECH_ID]',
  style: {
    primary: '#7CD259',
    background: '#0C120D',
    foreground: '#FFFFFF',
    'widget-background': '#0C120D',
    'widget-foreground': '#FFFFFF',
    'widget-btn-background': '#7CD259',
    'widget-btn-foreground': '#0C120D',
    'seek-background': '#FFFFFF',
    'seek-fill': '#7CD259',
    'seek-thumb': '#FFFFFF',
    visualizer: '#7CD259'
  }
});

Labels et icônes

Vous pouvez aussi surcharger les textes d’interface et les icônes SVG.

new VoiceDropper(target, {
  speech: '[YOUR_SPEECH_ID]',
  labels: {
    play: 'Lecture',
    stop: 'Stop',
    resume: 'Reprendre',
    pause: 'Pause',
    speed: 'Vitesse de lecture',
    close: 'Fermer'
  }
});

Cette option est utile si vous devez adapter le lecteur à une langue, à un ton de marque ou à des contraintes produit spécifiques.

Bonnes pratiques

Utilisez le markup si vous voulez garder un rendu homogène sur tout le site.
Passez à l’API JavaScript si vous avez besoin de variations de page, de mises à jour runtime ou d’une logique produit plus fine.
Gardez une cohérence visuelle entre les couleurs du lecteur et votre identité de marque.
Vérifiez toujours le contraste des couleurs pour conserver une bonne accessibilité.

Installation

Mode automatique

Personnalisation du lecteur