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:
El mismo atributo puede establecerse en el <podcast-footer url="..."> de nivel superior para sobrescribir lo que envíe el reproductor en línea. Las URL se sanitizan en tiempo de compilación y de ejecución; solo se aceptan los esquemas http y https al renderizar el enlace.
Tamaño del Pie
El atributo size en <podcast-footer> controla el tamaño visual de la barra. Hay tres preajustes disponibles:
size="small"(por defecto): la barra compacta actual. Portada de 36px, columna de info de 140px, botones de 32px. Omitir el atributosizees equivalente asize="small".size="medium": una barra más ancha con portada de 48px, columna de info de 240px, botones de 36px y fuentes ligeramente más grandes.size="large": un banner de ancho completo con portada de 64px, columna de info de 400px, botones de 44-56px y las fuentes más grandes.
<podcast-footer id="podcast-footer" size="medium" data-turbo-permanent></podcast-footer>
En pantallas de menos de 768px de ancho, los tres tamaños colapsan al mismo diseño compacto que size="small" produce en escritorio. Los valores desconocidos (size="huge", etc.) vuelven al diseño small por defecto.
El atributo es puramente visual. La persistencia, la reproducción y la URL de la fuente de audio no se ven afectadas por size. Las variables de tema (--podcast-player-bg, --podcast-player-text, etc.) siguen funcionando como antes.
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