Personaliza el reproductor de audio

6 min de lectura

El reproductor de audio es lo que ven y pulsán tus visitantes. Puedes cambiar sus colores, su posición en la página, su tamaño y los controles que muestra. Previsualiza los cambios en tiempo real antes de guardar.

Abre la página de ajustes del Reproductor

Ve a Texto a Voz → Reproductor. La página está organizada en seis secciones:

  1. Posición
  2. Visibilidad
  3. Colores
  4. Estilo de la barra de progreso
  5. Controles visibles
  6. Vista previa en vivo

Cada cambio que hagas actualiza la vista previa al final de la página.

Posición

Donde 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 (opción predeterminada)
  • Antes del extracto: visible solo en vistas de archivo o listado del blog
  • Después del extracto: mostrado 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 hace scroll

Para la mayoría de blogs, Después del título o Después del contenido funciona mejor. Consulta Reproductor de pie de página fijo para la opción de barra anclada.

Visibilidad del reproductor (PRO)

Elige quién puede ver el reproductor de audio. Es un ajuste único para todo tu sitio, así que nunca necesitas editar entradas individuales. Elige uno de los tres modos en Mostrar reproductor a:

  • Todos: todos los visitantes ven el reproductor (opción predeterminada)
  • Solo usuarios registrados: los visitantes deben estar identificados para ver el reproductor
  • Solo roles seleccionados: solo los usuarios identificados con un rol permitido ven el reproductor

En el modo Solo roles seleccionados, aparece un interruptor para cada rol de tu sitio. Esto incluye roles creados por plugins de membresía como MemberPress, WooCommerce Memberships o Paid Member Subscriptions. Activa los roles que deben ver el reproductor y guarda los cambios.

Esto facilita ofrecer el audio como ventaja exclusiva para miembros. Mantén tus artículos de lectura libre y muestra el botón de escucha solo a los suscriptores.

Algunas cosas que debes saber:

  • Si eliges Solo roles seleccionados y no activas ningún rol, el reproductor queda oculto para todos.
  • Oculto significa completamente oculto. Los visitantes sin acceso no ven el reproductor y la página no carga ningun archivo del reproductor para ellos.
  • Si usas caché de página completa, excluye las páginas con acceso restringido del almacenamiento en caché. De lo contrario, la caché puede servir la misma página almacenada a miembros y visitantes anónimos.
  • Los desarrolladores pueden sobrescribir el ajuste por visitante con el filtro mementor_tts_player_visible. Esto es útil para plugins de membresía que otorgan acceso sin un rol.

Colores

Tres selectores de color controlan el aspecto del reproductor:

  • Fondo: el color de la superficie del reproductor
  • Texto: el 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 (opción predeterminada)
  • 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 para 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 interruptor simple de activar o desactivar. Activalos cuando quieras que sean visibles y desactivalos cuando prefieras 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
  • Bucle
  • 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. Una pequeña muestra de texto se reproduce al hacer clic. La vista previa se actualiza con cada cambio que realices.

Haz clic en Guardar cambios en la barra superior cuando estés satisfecho. Los cambios se aplican de inmediato a todas las entradas con audio.

Comportamiento en móvil

El reproductor es responsivo y se adapta a pantallas mas 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 Bucle y Velocidad se ocultan completamente, conservando 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 automaticamente. Si ves colores antiguos, actualiza la página forzando la recarga (Ctrl+Shift+R).