Barre de progression en forme d'onde

2 min read

Une forme d'onde visuelle remplace la barre de progression linéaire standard. Chaque article obtient un motif unique, ce qui rend chaque lecteur distinct. Plans Pro et Agence.

Activation

  1. Allez dans Synthèse vocale - TTSWP → Lecteur.
  2. Dans Style de barre de progression, choisissez Forme d'onde.
  3. Enregistrez.

Tous les lecteurs audio de votre site utilisent maintenant la forme d'onde.

Pourquoi chaque article obtient un motif unique

La forme d'onde est générée à partir d'une valeur dérivée de l'identifiant de l'article. Cela signifie :

  • Chaque article possède une forme d'onde visuellement différente
  • Le même article affiche toujours la même forme d'onde
  • La forme d'onde ne représente pas l'audio réel (c'est un motif visuel déterministe)

C'est bien plus attrayant qu'une barre statique, sans ajouter le moindre poids au fichier - la forme d'onde est un SVG en ligne composé de 60 barres.

Cliquer et glisser pour naviguer

La forme d'onde est interactive :

  • Cliquez n'importe où pour accéder directement à cette position
  • Cliquez et faites glisser l'indicateur de position pour parcourir l'audio
  • Fonctionne sur ordinateur et appareils tactiles

Couleurs

La forme d'onde utilise deux couleurs définies dans vos paramètres de lecteur :

  • Couleur par défaut de la progression - barres non lues
  • Couleur de lecture de la progression - barres derrière la tête de lecture

Modifiez-les dans Synthèse vocale - TTSWP → Lecteur → Couleurs.

Performance

  • La forme d'onde est un SVG en ligne unique (~2 Ko par lecteur)
  • Aucun JavaScript au-delà de ce que le lecteur charge déjà
  • N'affecte pas les Core Web Vitals

Option de repli pour les utilisateurs gratuits

Les utilisateurs du plan gratuit voient la barre de progression linéaire même si la forme d'onde est sélectionnée - c'est une fonctionnalité PRO.

Pages associées

All articles in this section