Tema de WordPress de audio fijado

Reeditado por Platón

seguidores: 0

Me temo que tengo que empezar esto con toda una historia de fondo, ya que el viaje aquí es el punto, no tanto el tema.

Un tipo me escribió hace un tiempo describiendo una situación en la que se encontraba. Su compañía tiene un montón de sitios de WordPress para radio pública, muchos de los cuales son esencialmente casas para podcasts. Hay una funcionalidad específica que pensó que sería ideal para todos ellos: tener un reproductor de audio "anclado". Como si pudiera reproducir un podcast, luego continuar navegando por el sitio sin que ese podcast se detenga.

Esto es algo complicado de lograr en WordPress, porque WordPress realiza recargas de página completa como cualquier otro sitio web normal, sin hacer nada especial con el manejo de enlaces o la manipulación del historial. Cuando se vuelve a cargar una página, el audio de la página deja de reproducirse. Así es como funciona la web.

Entonces, ¿cómo lo llevarías a cabo en un sitio de WordPress? Bueno, podría convertirlo en un sitio de WordPress sin cabeza y reconstruir todo el front-end como una aplicación de una sola página. Suena divertido para mí, pero dudaría en hacer esa llamada solo para esto una cosa.

Que mas puedes hacer? Puede encontrar una manera de hacer que la página nunca se vuelva a cargar. Recuerdo haber hecho esto en un pequeño sitio estático hace 10 años, pero ese no era un sitio completo de WordPress y ni siquiera me molesté en actualizar la URL en ese entonces.

¿Y si hicieras esto?

Interceptar clics en enlaces internos
Ajax el contenido de esa URL
Reemplazó el contenido de la página con ese nuevo contenido.

Haré esto en jQuery rápido por ti:

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

Eso no está lejos de ser literalmente funcional. Querrías mirar por a popstate evento para lidiar con el botón Atrás, pero eso es solo unas pocas líneas más.

En este mundo hipotético, diseñarías el sitio de la siguiente manera:

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

Así que todo eso <main> el contenido se intercambia, la URL cambia, pero su <audio> El jugador se queda solo para seguir jugando en paz. Escribiría más JavaScript para darles a las personas una forma de actualizar lo que está reproduciendo el podcast y demás.

Sin embargo, resulta que hay más en qué pensar aquí. ¿Se ejecutarán scripts en línea en el contenido? ¿Qué hay de actualizar el <title> ¿también? Hay suficientes preocupaciones de borde que probablemente se moleste al lidiar con ellas.

Quería jugar con estas cosas, así que preparé un tema de WordPress y busqué Turbo en lugar de escribir algo a mano. Turbo (la nueva versión de Turbolinks) está diseñado solo para esto. Es una biblioteca de JavaScript que coloca en la página (sin proceso de compilación, sin configuración) y simplemente funciona. Intercepta clics en enlaces internos, Ajax para contenido nuevo, etc. Pero tiene esta característica interesante en la que si pones un data-turbo-permanent atributo en un elemento HTML, lo persistirá durante esa recarga. Asique hizo eso para el reproductor de audio aquí.

Sin embargo, aquí está la cosa.

Simplemente no tengo tiempo para terminar este proyecto correctamente. Fue divertido tener una obra de teatro, pero mi interés en ella se ha desvanecido. Así que lo dejaré solo por ahora:

It casi funciona, menos un error evidente de que el audio deja de reproducirse en la primera navegación y luego funciona. Estoy seguro de que se puede arreglar, pero no tengo mucha piel en este juego. Supongo que me retiraré y dejaré este código para que alguien lo recoja si es útil para ellos.

Otra cosa en juego aquí es que Turbo es de Basecamp, y Basecamp tiene bastante implosionado recientemente, lo que hace que no se sienta bien usar su software. Exacerbado por el hecho de que Sam Stephenson escribió el 75% de Turbo y ha dicho que no lo tocará (u otros proyectos relacionados) a menos que el software se mueva a su propia base. Turbo ya estaba en un lugar inestable ya que parecía calesa en comparación con Turbolinks, y ahora está en muy terreno retorcido.

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

Sello de tiempo: 18 de mayo de 2021