Ajouter l'écoute audio à un site Framer
Framer sert à concevoir des sites soignés sans écrire de code, mais il accueille de plus en plus de blogs et de pages de contenu. Voici comment y intégrer une version audio de vos articles, ce que la plateforme permet, et ses limites réelles.
Framer a longtemps été un outil de prototypage. Il est devenu un vrai constructeur de sites, utilisé pour des pages d'accueil léchées, des portfolios, mais aussi des blogs et des centres de ressources alimentés par son CMS intégré. Dès qu'un site Framer publie du contenu long à lire, la question de l'écoute audio se pose : offrir une version parlée de vos articles, c'est toucher les lecteurs qui parcourent votre site sur mobile, en déplacement, ou qui préfèrent simplement écouter. Cet article explique comment ajouter l'audio à un site Framer, ce qui fonctionne bien, et ce qu'il faut savoir avant de se lancer.
Ce que Framer permet, et ce qu'il contraint
Framer est une plateforme hébergée : vous n'avez pas accès au serveur, mais vous disposez de deux leviers d'intégration puissants. Le premier est le composant d'embarquement (Embed), qui insère du HTML ou un script tiers dans une page. Le second est le composant de code (Code Component), qui permet d'ajouter un élément React personnalisé à votre design. L'un comme l'autre suffisent à afficher un lecteur audio, à condition de choisir la bonne approche selon votre confort technique.
La contrainte principale tient au CMS. Framer gère les articles via des collections, et vous éditez chaque page à partir d'un gabarit. C'est une bonne nouvelle : cela signifie qu'un lecteur inséré une fois dans le gabarit d'article se retrouvera sur tous vos billets, sans intervention page par page. C'est la logique à privilégier dès que vous publiez régulièrement.
La voie propre : le lecteur dans le gabarit d'article
Si votre blog est géré par le CMS de Framer, le plus durable est d'insérer le lecteur une seule fois dans le gabarit (le template lié à votre collection d'articles). Vous placez un composant Embed juste sous le titre, vous le configurez pour qu'il pointe vers l'article courant, et il apparaît ensuite automatiquement sur chaque nouvelle publication. Vous ne pensez plus à l'audio : il suit le rythme de votre blog.
Cette approche a un autre avantage. Comme le lecteur se rapproche de l'article par son adresse publique, la version audio reste liée à la bonne page même si vous republiez ou modifiez le texte. Pour les sites qui produisent beaucoup, c'est ce qui évite de gérer un identifiant à la main pour chaque billet.
L'automatisation par le flux
Framer expose le contenu de vos collections, et la façon la plus robuste de sonoriser un blog qui publie souvent est de brancher un flux. Notre flux RSS détecte les nouveaux articles et prépare leur version audio sans action manuelle de votre part : vous publiez dans Framer, l'audio se fabrique, le lecteur est prêt quand le visiteur arrive. Si votre organisation gère le contenu depuis un système tiers plutôt que depuis le CMS de Framer, notre API et connecteurs CMS offrent la même automatisation par un autre chemin.
Cette logique de flux est exactement celle que nous recommandons pour les autres constructeurs sans code. Le principe est identique à celui décrit pour Webflow : un point d'entrée unique, une sonorisation qui se déclenche seule, et aucun geste répétitif à chaque article.
La voie rapide : article par article
Si vous avez peu d'articles, ou si vous voulez tester avant de toucher au gabarit, l'insertion manuelle reste possible. Vous ajoutez un composant Embed dans la page concernée et vous y collez le bloc du lecteur. C'est sans risque pour le reste du design, et cela vous permet de voir le rendu réel avant de généraliser. L'inconvénient est connu : ce geste est à refaire à chaque nouvel article, ce qui devient vite fastidieux si vous publiez souvent.
Les points de vigilance propres à Framer
Trois détails méritent votre attention. D'abord, la performance : Framer soigne les temps de chargement, et un script tiers mal intégré peut peser sur cette réputation. Un lecteur léger, chargé de façon asynchrone, évite ce compromis. Ensuite, le responsive : vérifiez le rendu du lecteur sur les points de rupture mobile de votre design, car Framer laisse une grande liberté de mise en page qu'un composant inséré doit respecter. Enfin, la prévisualisation : Framer distingue l'aperçu de l'éditeur du site publié, et certains embeds ne s'activent qu'une fois le site en ligne. Ne concluez pas trop vite qu'un lecteur ne fonctionne pas parce qu'il reste inerte dans l'éditeur.
En résumé
Framer accueille très bien une version audio, à condition de choisir la méthode adaptée à votre volume. Pour un blog qui vit, insérez le lecteur une fois dans le gabarit et branchez le flux : l'audio suit vos publications sans que vous ayez à y penser. Pour quelques pages, l'insertion manuelle fait le travail et vous laisse juger du rendu. Dans les deux cas, vous offrez à vos visiteurs un accès à votre contenu qui ne dépend plus de leur envie ou de leur capacité à lire à l'écran.
Sonorisez vos articles avec WeDispatch
Ce blog sera lui-même sonorisé par WeDispatch. Envie de voir ce que ça donne sur vos contenus ?
Demandez une démo