Un visiteur commence à écouter votre musique, ouvre une autre page, et le son s'arrête. Pour un site de musique, un podcast ou une boutique de beats, cette interruption peut gâcher l'expérience utilisateur.
La lecture audio en continu permet aux visiteurs de continuer à écouter tout en naviguant sur votre site web. Il existe toutefois une différence importante entre reprendre la lecture d'un morceau après le rafraîchissement d'une page et maintenir la lecture sans interruption.
Dans ce guide, nous vous expliquerons ces deux méthodes et comment ajouter la lecture audio en continu à WordPress, notamment grâce à Ajaxify by Sonaar, notre plugin permettant une navigation fluide et une écoute ininterrompue.
Vous cherchez déjà une solution ? Découvrez Ajaxify et testez la démo de lecture en continu →
Qu'est-ce que la lecture audio en continu ?
La lecture audio en continu permet à une session d'écoute de se poursuivre même lorsque l'utilisateur navigue d'une page à l'autre sur votre site web.
Par exemple, un visiteur pourrait lancer une chanson depuis votre page d'accueil, parcourir votre catalogue musical et ouvrir votre page « À propos » tout en continuant à écouter le même morceau.
Cela s'avère particulièrement utile pour :
- Des musiciens qui partagent des albums, des singles et des enregistrements live.
- Les créateurs de morceaux permettent aux clients d'écouter des extraits des morceaux tout en parcourant le site.
- Les podcasteurs dont les auditeurs souhaitent découvrir d'autres épisodes ou consulter les notes d'émission.
- Des labels, des DJ et des producteurs qui présentent leurs catalogues.
Un lecteur audio « sticky » permet d'accéder facilement aux commandes de lecture pendant que les visiteurs font défiler la page. Cependant, un lecteur « sticky » ne garantit pas à lui seul une lecture audio ininterrompue d'une page à l'autre. Ce qui importe, c'est de savoir si le site web recharge le lecteur pendant la navigation.
Deux façons de poursuivre la lecture audio sur WordPress
Les sites WordPress peuvent conserver une session d'écoute de deux manières différentes : en mémorisant la position de lecture ou en laissant le lecteur audio en marche.
1. Reprendre la lecture après le rafraîchissement de la page
Grâce à cette approche, le site web mémorise le titre en cours et la position de lecture à l'aide de cookies ou de la mémoire du navigateur.
Lorsqu'un utilisateur ouvre une autre page, le navigateur charge un nouveau document, recrée le lecteur audio et tente de reprendre la lecture de la piste à partir de la position enregistrée.
Cela peut s'avérer utile lorsque vous souhaitez conserver une navigation normale entre les pages. Cependant, le son s'interrompt pendant le rafraîchissement de la page, ce qui peut entraîner une coupure audible pour les auditeurs. Les restrictions de lecture automatique imposées par certains navigateurs peuvent également les obliger à appuyer à nouveau sur le bouton « Lecture ».
Idéal pour : se souvenir de l'endroit où l'auditeur s'est arrêté lorsqu'une brève interruption est acceptable.
2. Maintenir la lecture audio lors de la navigation via AJAX
La navigation AJAX charge le contenu d'une nouvelle page sans remplacer l'intégralité du document du navigateur.
Lorsque le lecteur audio reste en dehors du contenu en cours de remplacement, il peut continuer à diffuser pendant que l'internaute navigue sur votre site web. La page change, mais la session d'écoute reste active.
Idéal pour : continuer à écouter de la musique, des podcasts ou tout autre contenu audio pendant la navigation, sans interruption due au rafraîchissement de la page.
| Que se passe-t-il lorsqu'un visiteur change de page ? | Reprendre après le rechargement | Joueur persistant avec AJAX |
|---|---|---|
| La page entière se recharge | Oui | Non, pour la navigation compatible AJAX |
| Le lecteur audio a été recréé | Oui | Le joueur actuel reste actif |
| Comportement de lecture | Tentatives de reprise à partir d'une sauvegarde | La lecture se poursuit pendant le chargement du nouveau contenu |
| Principal avantage | Mémorise la progression d'écoute | Évite les interruptions dues au rafraîchissement des pages |
Ajoutez la lecture audio en continu grâce à Ajaxify de Sonaar
Un thème compatible AJAX n'est plus le seul moyen d'ajouter une navigation fluide à WordPress.
Ajaxify par Sonaar apporte la navigation AJAX à votre site web grâce à un plugin. Il charge le contenu de la nouvelle page tout en conservant les éléments persistants, notamment votre lecteur audio, à leur place.
Ajaxify permet également d'assurer des transitions fluides entre les pages et peut donner l'impression que la navigation est plus rapide en limitant les rechargements complets de la page.
Il fonctionne avec MP3 Audio Player Pro et peut également être configuré avec des lecteurs audio tiers. Pour une lecture en continu, il est indispensable que le lecteur actif reste actif pendant la navigation.
Ajaxify gère la navigation. Votre lecteur audio gère la musique, les listes de lecture et les commandes de lecture.
Comment configurer la lecture en continu
1. Installez et activez Ajaxify
Téléchargez le plugin Ajaxify sur WordPress, activez-le, puis ajoutez votre licence pour bénéficier des mises à jour et de l'assistance.
Si vous l'intégrez à un site web existant, utilisez d'abord une version de test afin de pouvoir vérifier la navigation et la configuration du lecteur avant de rendre les modifications publiques.
2. Configurez votre lecteur audio
Choisissez le lecteur que les visiteurs utiliseront pour écouter votre contenu.
Avec MP3 Audio Player Pro, configurez vos morceaux et votre lecteur « sticky ». Si vous utilisez déjà un autre lecteur, vérifiez comment il est intégré à votre site et s'il peut rester actif lorsque vous changez de page.
Le lecteur doit rester en dehors du contenu de la page remplacé par la navigation AJAX. Un lecteur recréé à chaque nouvelle page ne peut pas garantir la continuité de la session d'écoute.
3. Configurer la navigation entre les pages et les transitions
Configurez Ajaxify pour la zone de contenu de votre site et activez le comportement de transition de page souhaité.
Identifiez les pages ou les interactions qui nécessitent un chargement normal, puis configurez les exclusions si nécessaire. Votre thème, votre constructeur de pages et vos autres plugins peuvent influencer les paramètres dont votre site a besoin.
4. Tester l'expérience d'écoute
Lancez une session de suivi, puis naviguez sur votre site web comme le ferait un visiteur.
Ouvrez votre page d'accueil, votre page « Musique », votre page « À propos » et d'autres pages importantes. Vérifiez que :
- La piste continue sans redémarrer lors de la navigation AJAX.
- Les commandes de jeu fonctionnent toujours.
- L'élément de menu actif et l'adresse du navigateur s'actualisent correctement.
- Les boutons « Précédent » et « Suivant » du navigateur fonctionnent comme prévu.
- Les formulaires, les menus et les autres éléments interactifs continuent de fonctionner.
- Cette fonctionnalité est disponible sur ordinateur et sur mobile.
Pour une boutique en ligne, testez également les options des produits, les actions d'ajout au panier, le panier lui-même et le processus de paiement.
Essayez la démo interactive d'Ajaxify pour découvrir la lecture en continu en action →
Et si votre thème WordPress intégrait déjà une navigation AJAX ?
Certains thèmes WordPress proposent déjà une navigation AJAX et un lecteur audio persistant, notamment les thèmes WordPress dédiés à la musique de Sonaar.
Si votre configuration actuelle permet déjà de maintenir la lecture audio d'une page à l'autre, vous n'aurez peut-être pas besoin d'un autre plugin de navigation.
Vérifiez les fonctionnalités existantes du thème avant d'activer un deuxième système de navigation AJAX. L'utilisation simultanée de deux systèmes qui interceptent tous deux les liens des pages peut entraîner des conflits.
Pour les sites web qui ont besoin d'ajouter cette fonctionnalité séparément, Ajaxify propose une approche basée sur des plugins.
Compatibilité et dépannage
La navigation AJAX modifie la manière dont les pages se chargent. Certains plugins n'initialisent leurs fonctionnalités que lors du chargement complet d'une page ; il convient donc de vérifier leur comportement lorsque du nouveau contenu est chargé de manière dynamique.
La compatibilité dépend de la configuration globale : votre thème, votre lecteur, votre constructeur de pages, vos plugins et vos paramètres de navigation.
Le son s'arrête lorsque j'ouvre une autre page
Vérifiez si ce lien provoque un rafraîchissement complet de la page. Si c'est le cas, le navigateur recréera le lecteur.
Si la navigation utilise AJAX, vérifiez si le lecteur actif se trouve dans la zone de contenu en cours de remplacement. Il doit rester actif pour garantir une lecture ininterrompue.
Un formulaire, un curseur ou tout autre widget cesse de fonctionner
Il se peut que le composant doive être réinitialisé après le chargement d'un nouveau contenu de page.
Vérifiez sa compatibilité et sa configuration. Si nécessaire, laissez la page concernée se charger normalement plutôt que d'imposer une navigation AJAX.
Et WooCommerce, alors ?
La compatibilité avec WooCommerce doit être évaluée en fonction de votre configuration spécifique, plutôt que d'être considérée comme une réponse générale par « oui » ou par « non ».
Les pages produits, les mises à jour du panier, le processus de commande et les intégrations de paiement impliquent des comportements différents. Testez l'ensemble du parcours d'achat et conservez les chargements normaux des pages lorsque votre configuration l'exige.
J'ai besoin d'aide pour ma configuration
Si quelque chose ne fonctionne pas comme prévu, contactez le service d'assistance de Sonaar en indiquant l'URL de votre site web, les détails du lecteur et les étapes permettant de reproduire le problème.
Foire aux questions
Puis-je faire en sorte que la musique continue de jouer sur toutes les pages de WordPress sans modifier mon thème ?
Oui, une solution basée sur un plugin, comme Ajaxify, permet d'ajouter une navigation AJAX sans que vous ayez à passer à un thème intégrant cette fonctionnalité. Votre thème et votre lecteur doivent toutefois être configurés et testés ensemble.
Un lecteur audio « sticky » correspond-il à une lecture en continu ?
Non. Le terme « sticky » désigne un lecteur qui reste visible lorsque vous faites défiler la page. Pour garantir une lecture ininterrompue d'une page à l'autre, le lecteur audio actif doit continuer à fonctionner pendant la navigation.
Ai-je besoin de MP3 Audio Player Pro pour utiliser Ajaxify ?
Ajaxify fonctionne avec MP3 Audio Player Pro et peut également être configuré avec des lecteurs tiers. Le lecteur doit rester actif en dehors du contenu remplacé lors de la navigation.
Ajaxify lance-t-il automatiquement de la musique lorsqu'un visiteur accède au site ?
La lecture en continu et la lecture automatique sont deux fonctionnalités distinctes. Les visiteurs doivent pouvoir appuyer sur le bouton « Lecture » pour commencer à écouter, puis continuer à naviguer sur le site pendant que l'audio continue de jouer. Certaines restrictions du navigateur peuvent empêcher le son de démarrer automatiquement.
Le son continuera-t-il à être diffusé si quelqu'un actualise la page ?
Un rafraîchissement manuel recharge la page du navigateur, y compris le lecteur audio. La navigation AJAX empêche le rechargement lors des changements de page pris en charge ; elle n'empêche toutefois pas un visiteur de rafraîchir la page ou de quitter le site web.
La navigation AJAX améliore-t-elle automatiquement le référencement naturel ?
Non. Une navigation fluide améliore l'expérience utilisateur, mais ne garantit pas un meilleur classement.
Chaque page doit toujours disposer de sa propre URL accessible, d'un contenu pertinent, d'un titre et de balises canoniques appropriés, ainsi que de liens internes pouvant être explorés. Vérifiez que ces éléments restent corrects lors de la navigation via AJAX et lors de l'ouverture directe d'une page.
Laissez les visiteurs explorer les lieux pendant que la musique continue de jouer
Vos visiteurs ne devraient pas avoir à choisir entre écouter et parcourir votre site web.
La mémorisation de la position de lecture peut aider les auditeurs à reprendre une session. Le fait de maintenir le lecteur actif pendant la navigation AJAX améliore encore l'expérience en supprimant les interruptions causées par les changements de page habituels.
Ajaxify, développé par Sonaar, allie une expérience d'écoute ininterrompue à une navigation fluide et à des transitions de page en douceur.
Découvrez Ajaxify, testez la démo et choisissez votre licence →
