El reproductor de audio es lo que tus visitantes ven y utilizan. Puedes cambiar sus colores, su posición en la página, su tamaño y qué controles muestra. Previsualiza los cambios en vivo antes de guardar.
Abre la página de ajustes del reproductor
Ve a Texto a Voz → Reproductor. La página está organizada en cinco secciones:
- Ubicación
- Colores
- Estilo de la barra de progreso
- Controles visibles
- Vista previa en vivo
Cada cambio que haces actualiza la vista previa al final de la página.
Ubicación
Dónde aparece el reproductor en tus entradas. Elige una opción:
- Antes del título: encima del título de la entrada
- Después del título: entre el título y el primer párrafo
- Después del contenido: al final de la entrada (por defecto)
- Antes del extracto: se muestra solo en vistas de archivo o listado del blog
- Después del extracto: se muestra tras los resúmenes de entradas en archivos
- Pie de página fijo (PRO): anclado en la parte inferior de la página mientras el visitante se desplaza
Para la mayoría de los blogs, Después del título o Después del contenido funciona mejor. Consulta Reproductor en pie de página fijo para la opción de barra anclada.
Colores
Tres selectores de color controlan el aspecto del reproductor:
- Fondo: el color de la superficie del reproductor
- Texto: color del título y la visualización del tiempo
- Acento / Reproducir: el botón de reproducción, el relleno de progreso y los iconos activos
Elige colores que combinen con tu tema. La vista previa se actualiza en tiempo real.
Consejo: Si usas variables CSS en tu tema, puedes sobrescribir estos colores con CSS personalizado. Consulta CSS personalizado.
Estilo de la barra de progreso
Dos opciones:
- Lineal: una barra de progreso horizontal estándar (por defecto)
- Forma de onda (PRO): una forma de onda visual donde cada entrada tiene un patrón único
La forma de onda añade personalidad a cada entrada y queda genial en contenido estilo podcast. Está basada en SVG y no añade peso significativo a la página. Consulta Barra de progreso con forma de onda.
Controles visibles
Cada control es un simple interruptor de activar/desactivar. Actívalos cuando quieras que sean visibles, desactívalos para un aspecto más limpio.
- Reproducir / pausar: siempre activo (no se puede desactivar)
- Tiempo actual y duración
- Velocidad de reproducción (0.5x, 1x, 1.25x, 1.5x, 2x)
- Volumen
- Descargar
- Repetir
- Icono de información (muestra el nombre de la voz y el idioma)
Por accesibilidad, recomendamos dejar activos Visualización del tiempo, Velocidad y Descargar.
Vista previa en vivo
La parte inferior de la página muestra exactamente lo que verán tus visitantes. Un pequeño texto de muestra se reproduce al hacer clic. La vista previa se actualiza con cada cambio que realizas.
Haz clic en Guardar cambios en la barra superior cuando estés conforme. Los cambios se aplican de inmediato a todas las entradas con audio.
Comportamiento en móvil
El reproductor es adaptable y se ajusta a pantallas más pequeñas:
- Por debajo de 480px: los controles de Descargar e Información se contraen en un menú
- Por debajo de 320px: los controles de Repetir y Velocidad se ocultan por completo, manteniendo Reproducir y Tiempo
Caché de CSS dinámico
Tus elecciones de color se almacenan en caché durante 12 horas para evitar regenerar el CSS en cada carga de página. Al guardar los cambios, la caché se borra automáticamente. Si ves colores antiguos, actualiza la página forzando la recarga (Ctrl+Shift+R).