Thème WordPress audio épinglé

Republié par Platon

Suiveurs: 0

J'ai bien peur de devoir commencer par toute une histoire, car le voyage ici est le but, pas tellement le thème.

Il y a quelque temps, un gars m'a écrit pour me décrire une situation dans laquelle il se trouvait. Son entreprise possède de nombreux sites WordPress pour la radio publique, dont beaucoup sont essentiellement des sites de podcasts. Il pense qu’il y a une fonctionnalité spécifique qui serait idéale pour tous : avoir un lecteur audio « épinglé ». Comme si vous pouviez lire un podcast, puis continuer à naviguer sur le site sans que ce podcast ne s'arrête.

C’est quelque peu difficile à réaliser dans WordPress, car WordPress effectue des rechargements de pages complètes comme tout autre site Web classique, sans rien faire de spécial en matière de gestion des liens ou de manipulation de l’historique. Lorsqu'une page se recharge, tout audio sur la page cesse de jouer. C'est ainsi que fonctionne le Web.

Alors, comment y arriveriez-vous sur un site WordPress ? Eh bien, vous pouvez en faire un site WordPress sans tête et reconstruire l'intégralité du front-end en une application à page unique. Cela me semble amusant, mais j'hésiterais à passer cet appel juste pour ça UN chose.

Que pourriez-vous faire d'autre ? Vous pourriez trouver un moyen pour que la page ne se recharge jamais. Je me souviens avoir fait ça sur un petit site statique il y a 10 ans, mais ce n'était pas un site WordPress à part entière et je n'ai même pas pris la peine de mettre à jour l'URL à l'époque.

Et si tu faisais ça…

Intercepter les clics sur les liens internes
Ajaxé le contenu de cette URL
Remplacement du contenu de la page par ce nouveau contenu

Je vais faire ça rapidement dans jQuery pour vous :

$("a").on("click", () => { const url = $(this).attr("href"); $.get(url + " main", (data) => { $("main").html(data); history.pushState({}, "", url); });
});

Ce n'est pas loin d'être littéralement fonctionnel. Tu voudrais surveiller a popstate un événement pour gérer le bouton de retour, mais cela ne fait que quelques lignes supplémentaires.

Dans ce monde hypothétique, vous présenteriez le site comme :

<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>

Alors tout ça <main> le contenu est échangé, l'URL change, mais votre <audio> le joueur est laissé seul pour continuer à jouer en paix. Vous écririez plus de JavaScript pour donner aux gens un moyen de mettre à jour le podcast en cours de lecture, etc.

Il s’avère qu’il y a plus de choses à penser ici. Des scripts en ligne sur le contenu vont-ils être exécutés ? Qu'en est-il de la mise à jour du <title> aussi? Il y a suffisamment de problèmes de bord qui vous ennuieront probablement.

Je voulais m'amuser avec ce truc, alors j'ai créé un thème WordPress et j'ai cherché Turbo au lieu d'écrire quelque chose à la main. Turbo (la nouvelle version de Turbolinks) est conçu spécialement pour cela. C'est une bibliothèque JavaScript que vous déposez sur la page (pas de processus de construction, pas de configuration) et cela fonctionne. Il intercepte les clics sur les liens internes, ceux d'Ajax pour le nouveau contenu, etc. Mais il a cette fonctionnalité intéressante où si vous mettez un data-turbo-permanent attribut sur un élément HTML, il le conservera pendant ce rechargement. Donc je j'ai fait ça pour le lecteur audio ici.

Voici cependant le problème.

Je n'ai tout simplement pas le temps de terminer ce projet correctement. C'était amusant de jouer une pièce, mais mon intérêt pour cette pièce s'est un peu essoufflé. Je vais donc le laisser tranquille pour l'instant :

It presque fonctionne, moins un bug flagrant selon lequel l'audio cesse de jouer lors de la première navigation, puis fonctionne après cela. Je suis sûr que c'est réparable, mais je n'ai tout simplement pas beaucoup de peau dans ce jeu. Je pense que je vais simplement me retirer et laisser ce code à quelqu'un pour qu'il le récupère s'il lui est utile.

Une autre chose en jeu ici est que Turbo vient de Basecamp, et Basecamp a plutôt implosé récemment, ce n'est pas agréable d'utiliser leur logiciel. Exacerbé par le fait que Sam Stephenson a écrit 75% de Turbo et a déclaré qu'il n'y toucherait pas (ou à d'autres projets connexes) à moins que le logiciel ne soit déplacé vers sa propre fondation. Turbo était déjà dans une situation fragile puisqu'il semblait boghei par rapport à Turbolinks, et est maintenant activé très sol noueux.

Source : https://css-tricks.com/pinned-audio-wordpress-theme/

Horodatage: 18 mai 2021