El reproductor de pie fijo (<podcast-footer>) debe estar presente en la plantilla base de tu sitio para la persistencia entre páginas.
Añadir el Pie de Página
Añade este elemento justo antes de </body> en layouts/_default/baseof.html:
Atributos de Framework
Los atributos data-turbolinks-permanent, data-turbo-permanent y hx-preserve aseguran que el pie sobreviva a la navegación al usar estos frameworks:
| Framework | Atributo | Qué hace |
|---|---|---|
| Turbolinks | data-turbolinks-permanent | Evita que Turbolinks reemplace el pie en la navegación |
| Turbo | data-turbo-permanent | Evita que Turbo Drive transforme/reemplace el pie |
| htmx | hx-preserve | Indica a htmx que preserve el elemento durante intercambios DOM |
Si no usas ninguno de estos frameworks, omite esos atributos: el pie persistirá mediante sessionStorage para cargas de página vanilla.
Cómo Funciona la Persistencia
El reproductor sobrevive a las navegaciones usando múltiples estrategias:
- Ganchos de framework:
data-turbolinks-permanent/data-turbo-permanent/hx-preservemantienen vivo el elemento DOM del pie durante navegaciones SPA - Respaldo sessionStorage: Estado guardado en
sessionStorageenbeforeunload, restaurado en la siguiente carga - HTML vanilla: Las cargas de página tradicionales restauran posición, volumen, silencio y velocidad desde
sessionStorage
Estado Guardado
| Campo | Descripción |
|---|---|
currentTime | Posición de reproducción en segundos |
paused | Si el audio estaba pausado |
volume | Nivel de volumen (0–1) |
muted | Estado de silencio |
playbackRate | Velocidad de reproducción |
Reglas de Restauración de Posición
- Coincidencia exacta de URL: La posición solo se restaura cuando el
srcguardado coincide con el del elemento actual - Protección de antigüedad: Posiciones de más de 1 hora se descartan
- Estimación en pausa: Si el audio estaba pausado, la posición se restaura tal cual
- Estimación en reproducción: Si estaba reproduciendo, el tiempo transcurrido desde el guardado se añade
- Diferido a
loadedmetadata: La posición se establece solo después de que el navegador informe que la duración es conocida
Integración con Alternancia de Tema
Si tu sitio tiene un toggle de tema claro/oscuro, asegúrate de que las propiedades CSS del pie respondan a tu cambio de tema. El elemento <podcast-footer> responde automáticamente a estos selectores:
Si tu tema usa nombres de atributos diferentes, añade tus propias reglas:
Ejemplo: Sección de Pie en baseof.html Completa
Próximos Pasos
- Configurar front matter por episodio para RSS de podcast
- Establecer valores globales para todos los reproductores
- Explorar adaptadores de fuente para AzuraCast e iVoox