Tema de WordPress de audio fijado

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 que me escribió hace un tiempo contándome una situación en la que se encontraba. Su empresa tiene varios sitios de WordPress para radio pública, muchos de los cuales son esencialmente hogares para podcasts. Hay una funcionalidad específica que pensó que sería ideal para todos ellos: tener un reproductor de audio “fijado”. Como si pudieras reproducir un podcast y 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 y no hace nada especial con el manejo de enlaces o la manipulación del historial. Cuando se recarga una página, el audio de la página deja de reproducirse. Así es como funciona la web.

Entonces, ¿cómo lo lograrías en un sitio de WordPress? Bueno, podrías 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 por esta única cosa.

¿Qué más puedes hacer? Podrías encontrar una manera de hacer que la página nunca se recargue. Recuerdo haber hecho esto en un pequeño sitio estático hace 10 años, pero ese no era un sitio de WordPress completo y ni siquiera me molesté en actualizar la URL en ese entonces.

¿Qué pasaría si hicieras esto…?

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

Haré esto en jQuery rápidamente para ti:

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

Esto no está lejos de ser literalmente funcional. Querrías ver un popstateevento relacionado con el botón Atrás, pero son solo unas pocas líneas más.

En este mundo hipotético, diseñarías el sitio así:

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

Entonces, todo ese maincontenido se intercambia, la URL cambia, pero su audioreproductor puede seguir jugando en paz. Escribiría más JavaScript para brindarles a las personas una forma de actualizar qué podcast se está reproduciendo y demás.

Sin embargo, resulta que hay más en qué pensar aquí. ¿Se ejecutarán scripts en línea sobre el contenido? ¿Qué pasa con la actualización titletambién? Hay suficientes preocupaciones sobre los límites que probablemente le molestará tener que lidiar con ello.

Quería jugar con estas cosas, así que preparé un tema de WordPress y usé Turbo en lugar de escribir algo a mano. Turbo (la nueva versión de Turbolinks) está diseñada precisamente para esto. Es una biblioteca de JavaScript que colocas 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 coloca un data-turbo-permanentatributo en un elemento HTML, lo mantendrá durante esa recarga. Entonces hice eso para el reproductor de audio aquí.

Pero aquí está la cuestión.

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

Demostración en vivoRepositorio de GitHub

Casi funciona, menos un error evidente que indica 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 le resulta útil.

Otra cosa en el juego aquí es que Turbo es de Basecamp, y Basecamp ha implosionado recientemente, lo que hace que no sea agradable usar su software. Exacerbado por el hecho de que Sam Stephenson escribió el 75% de Turbo y ha dicho que no lo tocará (ni otros proyectos relacionados) a menos que el software se traslade a su propia base. Turbo ya estaba en una situación inestable ya que parecía tener errores en comparación con Turbolinks, y ahora está en un terreno muy complicado.