Fluid Music Player

Primeros pasos#

1. Agrega Fluid Music Player a tu página. Dale un ancho visible y deja que su altura se ajuste al contenido para que haya espacio al ampliarlo.
2. Abre Tracks y reemplaza las tres pistas de demo con tus propios Title, Artist, Artwork y Audio File o Audio URL. El panel admite hasta 20 pistas.
3. Elige Initial Track. Este control comienza en 0: 0 selecciona la primera pista y 1, la segunda.
4. Elige Initial Mode, Expand y Direction. Mini, Click Region y Auto son los valores de inserción predeterminados. Para reproducir la demo en posición inferior, elige Up y ancla el reproductor al borde inferior de su contenedor.
5. Elige un Preset y decide cuáles de Queue, Favorite, Shuffle, Repeat y Volume quieres mostrar.
6. Abre Framer Preview y presiona Play. Comprueba el avance dentro de la pista, la selección en la cola, la ampliación y la reproducción con tu propio audio.

Pistas y audio#

Audio File tiene prioridad sobre Audio URL. Borra el archivo subido si quieres usar la URL de la pista. La página de una canción en un servicio de streaming no es un archivo de audio directo.

Si falta la portada, se usa un degradado. Si falta audio, aparece el mensaje configurado para ese caso. Una fuente que falla puede mostrar Text → Audio Error. Reemplaza el audio de demo con archivos que tengas permiso de usar y prueba el formato y alojamiento definitivos.

Ajustes de reproducción#

Shuffle comienza desactivado. Repeat comienza en Off y alterna entre Off, All y One. Wrap Tracks no equivale a Repeat All: el primero controla la navegación manual; Repeat determina qué pasa al terminar una pista. La reproducción avanza por la lista; Repeat All vuelve a la primera pista al llegar al final. Repeat One reinicia la pista actual. Shuffle usa su propio historial de selección.

Previous reinicia la pista actual si lleva más de tres segundos de reproducción. Cerca del inicio, pasa a la pista anterior cuando está disponible.

Ampliación y cola#

Para ampliar hacia arriba, ancla el componente al borde inferior de su contenedor. Deja espacio para la vista ampliada y evita que un contenedor con desbordamiento oculto recorte la cola. El componente no se fija por sí solo a la pantalla.

Controles de posición de la demo#

La demo actual comienza en Mini con el preset Glass y tres pistas. Sus botones Top y Bottom permiten comparar posiciones: Top amplía hacia abajo y Bottom, hacia arriba. Cambiar de posición cierra la cola y devuelve el reproductor a Mini antes de la siguiente ampliación.

Esos botones están habilitados para la demo y tienen prioridad sobre Direction. Un reproductor recién insertado no los muestra. En tu página, usa Direction y la distribución del contenedor para elegir la posición; Auto es el valor de inserción predeterminado. La demo tiene Direction guardado en Up, pero su selección inicial Top hace que se amplíe hacia abajo.

Accessory acepta un elemento conectado en el área de utilidades de la vista ampliada. El reproductor también ofrece los eventos On Play, On Pause, On Track Change, On Expand, On Collapse, On Favorite, On Ended y On Error para interacciones en Framer.

Apariencia#

En Preset, elige Glass, Graphite, Light o Custom. Custom muestra Custom Colors con Background, Foreground, Secondary, Error, Border, Slider Track, Hover, Queue y Active Row.

Usa Artwork → Image Fit → Contain si necesitas mostrar la portada completa. Cover llena su área y puede recortarla. El desenfoque de Glass depende de lo que haya detrás del reproductor; sobre un fondo opaco o uniforme puede ser sutil.

Animación#

Morph controla la transición entre Mini y Expanded y usa inicialmente un resorte. Track Change controla la transición entre pistas y comienza con una interpolación de 0.22 segundos. Las preferencias de movimiento reducido las sustituyen por transiciones casi instantáneas. Estos ajustes afectan a la presentación, no a la velocidad del audio.

Canvas y Preview#

Canvas State (Mini), Canvas Track (0) y Canvas Progress (35%) configuran la vista estática del editor. No inician el audio ni establecen la posición de reproducción del visitante. Usa Initial Mode e Initial Track para el estado inicial interactivo.

La reproducción de audio está desactivada en la representación estática. Abre Preview para probar el contenido, los permisos del navegador y la duración real de la pista.

Adaptación a distintos tamaños#

El reproductor mide su contenedor. La vista ampliada usa una distribución ancha a partir de 720 px y una apilada por debajo, con separaciones menores en anchos reducidos.

El reproductor Mini oculta Previous por debajo de 360 px y el botón de volumen por debajo de 520 px. Otros controles secundarios también pueden moverse u ocultarse cuando falta espacio. Abre la vista ampliada para acceder a más controles. Mantén la portada visible si quieres permitir el cambio de pista mediante deslizamiento.

Usos recomendados#

Úsalo para un catálogo musical pequeño, muestras de podcasts, diseño sonoro o un portafolio creativo. Escribe títulos y créditos claros. Para una sección de audio siempre abierta, elige Expanded y considera una cola Inline.

Buenas prácticas#

• Prueba cada fuente de audio en Preview, incluida la carga y el avance dentro de la pista.
• Mantén Play visible; no dependas de Autoplay.
• Usa portadas de tamaño moderado y títulos breves en columnas estrechas.
• Deja espacio para ampliar y comprueba que el contenedor no recorte la cola.
• Revisa los colores personalizados, indicadores de foco y mensajes de error sobre el fondo de tu página.

Accesibilidad#

Los controles de reproducción usan botones con etiquetas; la posición de reproducción y el volumen usan controles deslizantes. Hay indicadores de foco visibles. El área Click Region puede activarse con teclado. Escape cierra la cola y devuelve el foco a su botón.

El grupo Accessibility permite editar las etiquetas del reproductor, botones, controles deslizantes, cola, favoritos y portada. Las preferencias de movimiento reducido acortan las transiciones de distribución y pista. Se conectan los controles de Media Session cuando el navegador los admite; las acciones disponibles dependen de él.

Los favoritos son un estado temporal del reproductor. No se guardan en una cuenta ni se conservan al recargar. Iniciar otra instancia de este reproductor en la misma página pausa la primera; no se controlan otros reproductores de audio.

Solución de problemas#

El audio no se reproduce automáticamente#

Presiona Play en Preview. El navegador puede rechazar la reproducción automática incluso con Autoplay activado. Revisa también Initial Volume y si el sonido está silenciado.

Se ignora mi Audio URL#

Borra Audio File en esa pista. Los archivos subidos tienen prioridad cuando ambos campos están completos.

La demo se amplía hacia abajo aunque Direction está en Up#

El selector Top/Bottom de la demo tiene prioridad. Selecciona Bottom para probar la ampliación hacia arriba. En un reproductor normal sin esos botones, Direction controla la dirección.

El reproductor muestra Audio unavailable#

Comprueba que la fuente sea un archivo de audio reproducible, accesible sin iniciar sesión y permitido por su alojamiento. Prueba subir el archivo directamente para distinguir un problema de alojamiento de uno de formato.

Canvas muestra otra pista#

Canvas Track controla la vista estática. Initial Track controla el reproductor interactivo. Ambos empiezan en 0.

La ampliación hacia arriba mueve el reproductor de forma inesperada#

Ancla el componente al borde inferior de su contenedor y deja que crezca su altura. Direction no cambia automáticamente la distribución del contenedor ni fija el reproductor a la pantalla.

Mis favoritos se reinician al recargar#

Los favoritos son temporales para la instancia actual. Usa Favorite en cada pista para definir su estado inicial; no hay una biblioteca persistente de favoritos.

La última pista no se repite#

Activa Repeat All en el reproductor. Wrap Tracks controla la navegación manual entre los extremos de la lista, no el modo de repetición.

Preguntas frecuentes#

¿Puedo subir mi propio audio?#

Sí. Usa Audio File en cada pista o una Audio URL directa. La reproducción depende del navegador y del formato de la fuente.

¿Se conecta con Spotify o Apple Music?#

Reproduce archivos subidos y URL directas de audio. No integra cuentas ni catálogos de servicios de streaming.

¿Puedo mantener ampliado el reproductor?#

Elige Initial Mode → Expanded y Expand → Disabled para impedir el cambio de modo.

¿Puedo ocultar la cola o la portada?#

Sí. Desactiva Queue o Artwork → Visible. Ocultar la portada también elimina el área usada para deslizar entre pistas.

¿Se guardan los favoritos de los visitantes que regresan?#

No. Se reinician con la instancia del reproductor. Favorite en cada pista define el estado inicial.

¿Pueden sonar varios reproductores a la vez?#

Las instancias de Fluid Music Player en la misma página coordinan la reproducción: iniciar una pausa la otra. Esto no controla otros componentes de audio.

¿Necesita instalar otro paquete en Framer?#

El componente importa React, Framer y Framer Motion. Sus controles no requieren que el comprador instale otro paquete manualmente en Framer.

Limitaciones#

Las pistas se configuran en el panel de Framer, con un máximo de 20 elementos. No hay cuentas, favoritos persistentes, integración con servicios de streaming ni control de velocidad de reproducción. Los formatos de audio, el permiso de Autoplay y los controles multimedia del sistema operativo dependen del navegador. La ampliación y la visibilidad de la cola también dependen de la distribución de la página.

Registro de cambios#

v1.0#

Primera versión documentada de Fluid Music Player.

• Archivos de audio subidos y URL directas con portada e información de la pista.
• Vistas Mini y Expanded, cola, avance dentro de la pista, volumen, reproducción aleatoria, repetición y favoritos temporales.
• Etiquetas, apariencia y animación configurables, con controles de vista estática en Canvas.