Descarga mixmotion - Descarga del código fuente mixmotion

mixmotion

Datos del sitio web

1.0.0

Descargar

Reproductor mixmotion

Un reproductor de música inmersivo con integración Mixcloud y efectos visuales dinámicos.

Haz clic en la imagen para probar la aplicación.

como usar

Para usuarios ocasionales que solo quieren descubrir música nueva con imágenes en pantalla completa, presione la imagen de arriba o el enlace a continuación para iniciar la aplicación web mixmotion en su dispositivo móvil, de escritorio o de TV.

¿Probar la aplicación?

https://lewhunt.github.io/mixmotion

Durante la reproducción, ingresarás a un modo inmersivo y relajado, con una gran variedad de fondos dinámicos que aparecen después de unos segundos de inactividad del usuario. A continuación se muestra un video rápido de la transición de la aplicación entre modos de reproducción:

Más capturas de pantalla y videos al final de este documento.

Instalación

Los desarrolladores también pueden instalar mixmotion Player como un componente de código abierto para usar en aplicaciones React. El método de instalación más rápido es mediante el comando npm i a continuación. Alternativamente, intégrelo manualmente tomando la carpeta lib en este repositorio junto con las dependencias asociadas.

npm install mixmotion -player

Uso básico

Importe el reproductor y renderice mixmotion Player en su propia aplicación con una URL de Mixcloud. Utilizará la configuración predeterminada para los demás accesorios no declarados.

mixmotion -player"; function Demo() { const [url, setUrl] = useState(""); useEffect(() => { setUrl("https://www.mixcloud.com/discover/trance/?order=latest"); }, []); return < mixmotion Player url={url} />; } export default Demo;">

 import { useEffect , useState } from "react" ;
import { mixmotion Player } from " mixmotion -player" ;

function Demo ( ) {
  const [ url , setUrl ] = useState ( "" ) ;

  useEffect ( ( ) => {
    setUrl ( "https://www.mixcloud.com/discover/trance/?order=latest" ) ;
  } , [ ] ) ;

  return < mixmotion Player url = { url } /> ;
}

export default Demo ;

Uso avanzado

La demostración avanzada y la aplicación web oficial ilustran cómo se puede personalizar aún más el componente. Se especifican accesorios para botones personalizados, fondos de vídeo y datos locales (elementos guardados). Una lista completa de accesorios se detalla más abajo en esta página.

mixmotionPlayer url={url} showsData={getSavedData} customButtons={customButtons} backdropVideoList={backdropVideoList} enableBackdropVideo={true} ></ mixmotion Player>">

 < mixmotion Player
  url = { url }
  showsData = { getSavedData }
  customButtons = { customButtons }
  backdropVideoList = { backdropVideoList }
  enableBackdropVideo = { true }
> </ mixmotion Player >

¿Por qué otro reproductor de música?

Ya hay muchos reproductores web y widgets disponibles de empresas como Soundcloud y Mixcloud que puedes integrar en tu aplicación.

mixmotion ofrece algo diferente; una experiencia de reproducción inmersiva en pantalla completa con efectos visuales únicos, al tiempo que brinda acceso gratuito al amplio catálogo de música de Mixcloud.

¿Qué lo distingue?

Integración de Mixcloud : acceso simple pero versátil al contenido de Mixcloud que va más allá de su widget oficial. Acceda a listas de reproducción, conjuntos de usuarios, géneros, etiquetas y programas individuales, con la capacidad de guardar favoritos de forma privada a través del almacenamiento local y compartir mezclas.
Imágenes dinámicas : las ilustraciones combinadas con efectos de lienzo y fondos de video en movimiento generan una combinación cautivadora de imágenes dentro de un reproductor de música rico e inmersivo.
Amplia compatibilidad con dispositivos : Diseñado para dispositivos móviles, de escritorio y de TV. La navegación táctil, con el cursor y las teclas de flecha ayudan a que la experiencia del usuario sea fluida en todas las plataformas.
Consideraciones futuras : integración con rutas de archivos locales, transmisiones de audio y otros servicios de música como Soundcloud. También se están considerando visualizaciones de audio en tiempo real y detección de ritmos.

¿Cómo funciona?

Debajo del capó, el componente está construido sobre la API oficial de Mixcloud y el widget Mixcloud.

También utiliza otro componente personalizado mío, el Fondo dinámico, para crear una combinación de videos en capas con efectos de animación CSS y lienzo. Los videos reciben 'modos de fusión' aleatorios para que se fusionen con el fondo del lienzo para brindar varios efectos de color.

Accesorios

Apuntalar	Descripción	Por defecto
`url`	La URL de Mixcloud del contenido a reproducir. ◦ Se admiten la mayoría de las URL, como listas de reproducción, usuarios, géneros, etiquetas y programas/conjuntos individuales ◦ Puede ser una URL completa o una clave Mixcloud parcial	nulo
`showsData`	Una serie de datos de muestra almacenados localmente que se pueden utilizar en lugar de una URL. ◦ La aplicación utiliza esto para programas guardados en el almacenamiento local.	nulo
`backdropVideoList`	Una serie de cadenas de URL de videos de fondo que aparecen en una secuencia aleatoria durante el modo de reproducción cuando no hay actividad del usuario.	nulo
`enableBackdropVideo`	Configúrelo en `true` para mostrar los videos de fondo anteriores cuando no haya actividad del usuario. ◦ El botón de alternancia de video en la interfaz de usuario (y el indicador de almacenamiento local) anulará esto	`false`
`enableUserLink`	Configúrelo en `true` para convertir el subtítulo del usuario/artista en un enlace de enrutador de reacción. (usado en la aplicación implementada)	`false`
`collapsed`	Configúrelo en `true` para minimizar los metadatos y controles del reproductor, a fin de dejar espacio para otro contenido. ◦ Se utiliza en la aplicación para el contenido de la página de inicio y de búsqueda.	`false`
`activityTimeout`	Anule el período de tiempo de inactividad del usuario, lo que luego activa un "modo inactivo" durante la reproducción para mostrar imágenes dinámicas completas. ◦ Se utiliza en la aplicación para proporcionar períodos de tiempo de espera más prolongados en las páginas de inicio y de búsqueda.	`4000`
`showWidget`	Muestre el widget oficial de Mixcloud en la parte inferior de la página, con sus propios controles y barra de progreso, en lugar de la barra de progreso personalizada. ◦ El widget oficial no admite la navegación con teclas de flecha para dispositivos de TV.	`false`
`width`	Anula el ancho del reproductor. ◦ Nota: la pantalla completa es la experiencia de usuario prevista, con contenido superpuesto ◦ Es posible que tengas que modificar el CSS si anulas el ancho.	`100%`
`height`	Anula la altura del jugador. ◦ Nota: la pantalla completa es la experiencia de usuario prevista, con contenido superpuesto ◦ Es posible que tengas que modificar el CSS si anulas la altura.	`100%`
`customButtons`	Especificar una colección de botones personalizados para la interfaz de usuario del reproductor ◦ Se utilizará un conjunto de botones predeterminados si no se especifica ninguno.	`null`
`autoplay`	Establecer en `false` para deshabilitar el intento de reproducción automática de contenido.	`true`
`withExclusives`	Configúrelo en `true` para incluir contenido exclusivo de la API Mixcloud. ◦ Nota: es poco probable que se reproduzca contenido exclusivo sin un mayor desarrollo para admitir la autenticación de inicio de sesión de usuario de Mixcloud	`false`
`listIndex`	Establezca el `number` de índice de medios inicial si tiene varios programas/conjuntos en la URL solicitada o en la matriz showData local	`0`
`style`	agregar estilos CSS en línea al reproductor	`null`

Accesorios de devolución de llamada

Los accesorios de devolución de llamada se activan en varios eventos de jugadores, por lo que puedes tomar más acciones cuando ocurran:

Apuntalar	Descripción
`onReady`	Se llama cuando el medio está cargado y listo para reproducirse.
`onPlay`	Se llama cuando los medios comienzan o reanudan la reproducción después de una pausa o almacenamiento en búfer.
`onPause`	Se llama cuando los medios están en pausa
`onBuffering`	Se llama cuando los medios comienzan a almacenarse en búfer.
`onEnded`	Se llama cuando el medio termina de reproducirse. &nbsp
`onError`	Se llama cuando se produce un error al intentar reproducir medios

Botones personalizados

Como se ilustra en la demostración avanzada, el reproductor se puede anular con botones personalizados. Hay una selección de tipos de acciones prediseñadas con sus propios íconos y comportamientos o puedes agregar los tuyos propios con el tipo de acción "personalizada".

mixmotion -player"; import { faBars } from "@fortawesome/free-solid-svg-icons"; const customButtons: ButtonProps[] = [ { action: "save", align: "right" }, { action: "previous", align: "center" }, { action: "playpause", align: "center" }, { action: "next", align: "center" }, { action: "custom", align: "right", label: "Queue", faIcon: faBars, onPress: () => { console.log("my custom button pressed"); }, }, ]; function Demo() { return < mixmotion Player url={url} customButtons={customButtons} />; }">

 import { mixmotion Player , ButtonProps } from " mixmotion -player" ;
import { faBars } from "@fortawesome/free-solid-svg-icons" ;

const customButtons : ButtonProps [ ] = [
  { action : "save" , align : "right" } ,
  { action : "previous" , align : "center" } ,
  { action : "playpause" , align : "center" } ,
  { action : "next" , align : "center" } ,
  {
    action : "custom" ,
    align : "right" ,
    label : "Queue" ,
    faIcon : faBars ,
    onPress : ( ) => {
      console . log ( "my custom button pressed" ) ;
    } ,
  } ,
] ;

function Demo ( ) {
  return < mixmotion Player url = { url } customButtons = { customButtons } /> ;
}

Accesorios de botones	Descripción
`action`	Elija entre acciones `custom` o una de las predefinidas: `collapse` , `github` , `mixcloud` , `mute` , `next` , `playpause` , `previous` , `save` , `videos`
`align`	Alineación del botón. Elija entre `left` , `center` , `right`
`label`	Una etiqueta de texto de sugerencia que aparecerá debajo del botón actual enfocado. Las acciones de botones prediseñadas utilizan etiquetas relevantes.
`faIcon`	Un ícono de fuente increíble. Las acciones de botones prediseñadas utilizan iconos relevantes.
`onPress`	Se llama cuando se presiona un botón. Las acciones de botones prediseñadas tienen sus propios comportamientos.
`onRelease`	Se llama cuando se suelta un botón. Actualmente sin uso.
`isSelectedFill`	Permite admitir el comportamiento de alternancia (en forma de relleno de botón) cuando se establece en verdadero.
`disable`	Evita la acción del botón cuando se establece en verdadero.

gancho useSavedItems

Este enlace personalizado se utiliza para actualizar y recuperar programas favoritos o que le gustan al usuario. El siguiente fragmento de la demostración avanzada ilustra cómo cargar el reproductor con datos guardados localmente.

mixmotionPlayer, useSavedItems, ShowsDataType } from "./lib/ mixmotion Player"; function Demo() { const { getSavedItems } = useSavedItems(); const getSavedData = useMemo(() => { const savedItems = getSavedItems(); if (savedItems.length) return { label: "Saved Sets", shows: savedItems.reverse(), } as ShowsDataType; }, [getSavedItems]); return ( < mixmotion Player showsData={getSavedData} /> ); } ">

 import { mixmotion Player ,
  useSavedItems ,
  ShowsDataType
} from "./lib/ mixmotion Player" ;

function Demo ( ) {
  const { getSavedItems } = useSavedItems ( ) ;

  const getSavedData = useMemo ( ( ) => {
    const savedItems = getSavedItems ( ) ;
    if ( savedItems . length )
      return {
        label : "Saved Sets" ,
        shows : savedItems . reverse ( ) ,
      } as ShowsDataType ;
  } , [ getSavedItems ] ) ;

  return (
    < mixmotion Player
      showsData = { getSavedData }
    />
  ) ;
}

useStore Hook

Para obtener más control, puede importar el gancho personalizado useStore para acceder globalmente al estado del reproductor. Vea los componentes internos como mixmotion PlayerUI para ver ejemplos de uso. El siguiente fragmento muestra el uso básico para obtener el título del programa actual y el estado de reproducción:

mixmotion -player"; // 2. get desired state values const playing = useStore((s) => s.playing); const title = useStore((s) => s.title); console.log("playing: state ", playing); console.log("Current title: ", title); < mixmotion Player ... />;">

 // 1. import useStore
import { mixmotion Player , useStore } from " mixmotion -player" ;

// 2. get desired state values
const playing = useStore ( ( s ) => s . playing ) ;
const title = useStore ( ( s ) => s . title ) ;

console . log ( "playing: state " , playing ) ;
console . log ( "Current title: " , title ) ;

< mixmotion Player . . . / > ;