Personnaliser le lecteur audio

6 min de lecture

Le lecteur audio est ce que vos visiteurs voient et sur lequel ils cliquent. Vous pouvez modifier ses couleurs, sa position sur la page, sa taille et les contrôles qu'il affiche. Prévisualisez vos modifications en temps réel avant d'enregistrer.

Ouvrir la page des paramètres du lecteur

Accédez à Synthèse vocale - Lecteur. La page est organisée en six sections :

  1. Placement
  2. Visibilité
  3. Couleurs
  4. Style de la barre de progression
  5. Contrôles affichés
  6. Aperçu en direct

Chaque modification que vous apportez met à jour l'aperçu en bas de la page.

Placement

L'endroit où le lecteur apparaît sur vos articles. Choisissez parmi :

  • Avant le titre : au-dessus du titre de l'article
  • Après le titre : entre le titre et le premier paragraphe
  • Après le contenu : à la fin de l'article (par défaut)
  • Avant l'extrait : affiché uniquement dans les vues d'archives ou de liste de blog
  • Après l'extrait : affiché après les résumés d'articles dans les archives
  • Pied de page fixe (PRO) : épinglé en bas de la page pendant que le visiteur fait défiler

Pour la plupart des blogs, Après le titre ou Après le contenu fonctionne le mieux. Consultez Lecteur en pied de page fixe pour l'option de barre épinglée.

Visibilité du lecteur (PRO)

Choisissez qui peut voir le lecteur audio. Il s'agit d'un seul paramètre pour l'ensemble de votre site, vous n'avez donc jamais besoin de modifier les articles individuellement. Choisissez l'un des trois modes sous Afficher le lecteur à :

  • Tout le monde : tous les visiteurs voient le lecteur (par défaut)
  • Utilisateurs connectés uniquement : les visiteurs doivent être connectés pour voir le lecteur
  • Rôles sélectionnés uniquement : seuls les utilisateurs connectés avec un rôle que vous autorisez voient le lecteur

En mode Rôles sélectionnés uniquement, un bouton bascule apparaît pour chaque rôle sur votre site. Cela inclut les rôles créés par des extensions d'abonnement comme MemberPress, WooCommerce Memberships ou Paid Member Subscriptions. Activez les rôles qui doivent voir le lecteur et enregistrez.

Cela permet de proposer facilement l'audio comme avantage réservé aux membres. Gardez vos articles gratuits à lire, et affichez le bouton d'écoute uniquement aux abonnés.

Quelques points à retenir :

  • Si vous choisissez Rôles sélectionnés uniquement et n'activez aucun rôle, le lecteur est masqué pour tout le monde.
  • Masqué signifie totalement masqué. Les visiteurs sans accès ne voient aucun lecteur, et la page ne charge aucun fichier de lecteur pour eux.
  • Si vous utilisez un cache de page complète, excluez les pages avec accès restreint du cache. Un cache peut sinon servir la même page enregistrée aux membres et aux visiteurs anonymes.
  • Les développeurs peuvent remplacer le paramètre par visiteur avec le filtre mementor_tts_player_visible. Cela est utile pour les extensions d'abonnement qui accordent l'accès sans rôle.

Couleurs

Trois sélecteurs de couleurs contrôlent l'apparence du lecteur :

  • Arrière-plan : la couleur de surface du lecteur
  • Texte : couleur du titre et de l'affichage de l'heure
  • Accent / Lecture : le bouton de lecture, le remplissage de la progression et les icônes actives

Choisissez des couleurs qui correspondent à votre thème. L'aperçu se met à jour en temps réel.

Conseil : Si vous utilisez des variables CSS dans votre thème, vous pouvez remplacer ces couleurs avec du CSS personnalisé. Consultez CSS personnalisé.

Style de la barre de progression

Deux options :

  • Linéaire : une barre de progression horizontale standard (par défaut)
  • Forme d'onde (PRO) : une forme d'onde visuelle où chaque article obtient un motif unique

La forme d'onde ajoute de la personnalité à chaque article et convient parfaitement au contenu de style podcast. Elle est basée sur SVG et n'ajoute pas de poids significatif à la page. Consultez Barre de progression en forme d'onde.

Contrôles affichés

Chaque contrôle est un simple bouton bascule actif/inactif. Activez-les quand vous souhaitez les rendre visibles, désactivez-les pour un rendu plus épuré.

  • Lecture / pause : toujours actif (ne peut pas être désactivé)
  • Temps actuel et durée
  • Vitesse de lecture (0,5x, 1x, 1,25x, 1,5x, 2x)
  • Volume
  • Téléchargement
  • Boucle
  • Icône d'information (affiche le nom de la voix et la langue)

Pour l'accessibilité, nous recommandons de laisser Affichage du temps, Vitesse et Téléchargement activés.

Aperçu en direct

Le bas de la page affiche exactement ce que vos visiteurs verront. Un petit exemple de texte est lu lorsque vous cliquez. L'aperçu se met à jour à chaque modification que vous apportez.

Cliquez sur Enregistrer les modifications dans la barre supérieure lorsque vous êtes satisfait. Les modifications s'appliquent immédiatement à chaque article avec audio.

Comportement sur mobile

Le lecteur est responsive et s'adapte aux écrans plus petits :

  • En dessous de 480 px : les contrôles Téléchargement et Information se replient dans un menu
  • En dessous de 320 px : les contrôles Boucle et Vitesse se masquent entièrement, conservant Lecture et Heure

Mise en cache du CSS dynamique

Vos choix de couleurs sont mis en cache pendant 12 heures pour éviter de régénérer le CSS à chaque chargement de page. Lorsque vous enregistrez des modifications, le cache se vide automatiquement. Si vous voyez d'anciennes couleurs, effectuez un rechargement forcé de la page (Ctrl+Shift+R).

All articles in this section