Thème WordPress audio épinglé

Je crains de devoir commencer cela par toute une histoire, car le voyage ici est le point, pas tellement le thème.

Un gars m’a écrit il y a quelque temps pour décrire une situation dans laquelle il se trouvait. Son entreprise a un tas de sites WordPress pour la radio publique, dont beaucoup sont essentiellement des foyers pour les podcasts. Il y a une fonctionnalité spécifique qui, selon lui, 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 un peu difficile à réaliser dans WordPress, car WordPress recharge une page complète comme tout autre site Web régulier ne faisant rien de spécial avec la gestion des liens ou la manipulation de l’historique. Lorsqu’une page se recharge, tout son de la page s’arrête. C’est ainsi que fonctionne le Web.

Alors, comment le feriez-vous sur un site WordPress? Eh bien, vous pouvez en faire un site WordPress sans tête et reconstruire l’ensemble du front-end en tant qu’application à page unique. Cela me semble amusant, mais j’hésiterais à faire cet appel uniquement pour cette seule chose.

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

Et si vous faisiez ça…

  1. Intercepter les clics sur les liens internes
  2. Ajax est le contenu de cette URL
  3. Remplacement du contenu de la page par ce nouveau contenu

Je vais le faire dans jQuery rapidement pour vous:

const url = $ (this).attr (« href »);

$ (« main »). html (données);

«  », url);

Ce n’est pas loin d’être littéralement fonctionnel. Vous souhaitez regarder un événement popstate pour gérer le bouton de retour, mais ce n’est que quelques lignes de plus.

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

Alors tout ça le contenu est échangé, l’URL change, mais votre le joueur est laissé seul pour continuer à jouer en paix. Vous souhaitez écrire 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 à penser ici cependant. Des scripts en ligne sur le contenu vont-ils être exécutés? Qu’en est-il de la mise à jour du trop? Il y a suffisamment de problèmes de bord qui vous ennuieront probablement.

Je voulais jouer avec ce genre de choses, alors j’ai jeté un thème WordPress et j’ai cherché Turbo au lieu d’écrire quelque chose à la main. Turbo (la nouvelle version de Turbolinks) est spécialement conçue 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 de lien interne, Ajax pour le nouveau contenu, etc. Mais il a cette fonctionnalité intéressante où si vous mettez un attribut data-turbo-permanent sur un élément HTML, il le persistera pendant ce rechargement. J’ai donc fait ça pour le lecteur audio ici.

Voici la chose cependant.

Je n’ai tout simplement pas le temps de terminer ce projet correctement. C’était amusant d’avoir une pièce de théâtre, mais mon intérêt pour elle s’est un peu évanoui. Je vais donc laisser ça tranquille pour le moment:

Cela fonctionne presque, 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 suppose que je vais simplement me retirer et laisser ce code à quelqu’un pour qu’il le récupère s’il est utile pour lui.

Une autre chose en jeu ici est que Turbo est de Basecamp, et Basecamp a plutôt implosé récemment, ce qui rend l’utilisation de leur logiciel désagréable. Exacerbé par le fait que Sam Stephenson a écrit 75% de Turbo et a déclaré qu’il ne le toucherait pas (ou d’autres projets connexes) à moins que le logiciel ne soit transféré dans sa propre fondation. Turbo était déjà dans un endroit fragile car il semblait bogué par rapport à Turbolinks, et est maintenant sur un terrain très noueux.