Download mixmotion - download do código-fonte mixmotion

mixmotion

Dados do site

1.0.0

Baixar

Leitor mixmotion

Um reprodutor de música envolvente com integração Mixcloud e efeitos visuais dinâmicos

Clique na imagem para experimentar o aplicativo

Como usar

Para usuários casuais que desejam apenas descobrir músicas novas com recursos visuais em tela cheia, clique na imagem acima ou no link abaixo para iniciar o aplicativo da web mixmotion em seu celular, desktop ou dispositivo de TV.

Experimente o aplicativo?

https://lewhunt.github.io/mixmotion

Na reprodução, você entrará em um modo imersivo e descontraído, com uma enorme variedade de planos de fundo dinâmicos aparecendo após alguns segundos de inatividade do usuário. Abaixo está um vídeo rápido da transição do aplicativo entre os modos de reprodução:

Mais capturas de tela e vídeos no final deste documento.

Instalação

Os desenvolvedores também podem instalar mixmotion Player como um componente de código aberto para usar em aplicativos React. O método de instalação mais rápido é através do comando npm i abaixo. Alternativamente, integre-o manualmente pegando a pasta lib neste repositório junto com as dependências associadas.

npm install mixmotion -player

Uso Básico

Importe o player e renderize mixmotion Player em seu próprio aplicativo com uma URL Mixcloud. Ele usará configurações padrão para outros adereços não 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 Avançado

A demonstração avançada e o aplicativo da web oficial ilustram como o componente pode ser personalizado ainda mais. Os acessórios são especificados para botões personalizados, planos de fundo de vídeo e dados locais (itens salvos). Uma lista completa de adereços é detalhada mais abaixo nesta 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 que outro reprodutor de música?

Já existem muitos players da web e widgets disponíveis como Soundcloud e Mixcloud que você pode integrar ao seu aplicativo.

mixmotion oferece algo diferente; uma experiência imersiva de reprodução em tela cheia com efeitos visuais exclusivos, ao mesmo tempo que fornece acesso gratuito ao vasto catálogo de músicas do Mixcloud.

O que o diferencia?

Integração Mixcloud : Acesso simples, mas versátil ao conteúdo Mixcloud que vai além de seu widget oficial. Acesse listas de reprodução, conjuntos de usuários, gêneros, tags e programas individuais, com a capacidade de salvar favoritos de forma privada por meio de armazenamento local e compartilhar mixagens.
Visuais dinâmicos : arte combinada com efeitos de tela e fundos de vídeo em movimento geram uma mistura cativante de imagens em um reprodutor de música rico e envolvente.
Amplo suporte a dispositivos : projetado para dispositivos móveis, desktop e TV. A navegação por toque, cursor e teclas de seta ajuda a tornar a experiência do usuário mais suave em todas as plataformas.
Considerações Futuras : Integração com caminhos de arquivos locais, fluxos de áudio e outros serviços de música como Soundcloud. Visualizações de áudio em tempo real e detecção de batidas também estão sendo consideradas.

Como funciona?

Nos bastidores, o componente é construído sobre a API oficial do Mixcloud e o Mixcloud Widget.

Ele também utiliza outro componente personalizado meu - Dynamic Backdrop - para criar uma mistura de vídeos em camadas com efeitos de animação CSS e canvas. Os vídeos recebem 'modos de mesclagem' aleatórios para que se fundam com o fundo da tela para fornecer vários efeitos de cores.

Adereços

Suporte	Descrição	Padrão
`url`	O URL Mixcloud do conteúdo a ser reproduzido ◦ A maioria dos URLs são suportados, como listas de reprodução, usuários, gêneros, tags e programas/conjuntos individuais ◦ Pode ser um URL completo ou uma chave Mixcloud parcial	nulo
`showsData`	Uma matriz de dados armazenados localmente que podem ser usados em vez de um URL. ◦ O aplicativo utiliza isso para programas salvos em armazenamento local.	nulo
`backdropVideoList`	Uma matriz de strings de URLs de vídeo em segundo plano que aparecem em uma sequência aleatória durante o modo de reprodução quando não há atividade do usuário	nulo
`enableBackdropVideo`	Defina como `true` para mostrar os vídeos de fundo acima quando não há atividade do usuário. ◦ O botão de alternância de vídeo na interface do usuário (e o sinalizador de armazenamento local) substituirá isso	`false`
`enableUserLink`	Defina como `true` para transformar o subtítulo do usuário/artista em um link react-router. (usado no aplicativo implantado)	`false`
`collapsed`	Defina como `true` para minimizar os metadados e controles do player, a fim de liberar espaço para outro conteúdo. ◦ Usado no aplicativo para conteúdo da página inicial e de pesquisa.	`false`
`activityTimeout`	Substitua o período de tempo limite de inatividade do usuário, que aciona um 'modo inativo' durante a reprodução para mostrar recursos visuais dinâmicos completos ◦ Usado no aplicativo para fornecer períodos de tempo limite mais longos nas páginas inicial e de pesquisa.	`4000`
`showWidget`	Exiba o widget oficial do Mixcloud na parte inferior da página - com seus próprios controles e barra de progresso - em vez da barra de progresso personalizada. ◦ O widget oficial não oferece suporte à navegação com teclas de seta para dispositivos de TV.	`false`
`width`	Substitua a largura do player. ◦ Observação: tela cheia é a experiência de usuário pretendida, com conteúdo sobreposto ◦ Talvez seja necessário modificar o CSS se você substituir a largura	`100%`
`height`	Substitua a altura do player. ◦ Observação: tela cheia é a experiência de usuário pretendida, com conteúdo sobreposto ◦ Pode ser necessário modificar o CSS se você substituir a altura	`100%`
`customButtons`	Especifique uma coleção de botões personalizados para a interface do player ◦ Um conjunto de botões padrão será usado se nenhum for especificado.	`null`
`autoplay`	Defina como `false` para desativar a tentativa de reprodução automática de conteúdo	`true`
`withExclusives`	Defina como `true` para incluir conteúdo exclusivo da API Mixcloud. ◦ Observação: é improvável que conteúdo exclusivo seja reproduzido sem desenvolvimento adicional para oferecer suporte à autenticação de login do usuário Mixcloud	`false`
`listIndex`	Defina o `number` de índice de mídia inicial se você tiver vários programas/conjuntos no URL solicitado ou na matriz showData local	`0`
`style`	adicione estilos CSS embutidos ao player	`null`

Suportes de retorno de chamada

Os adereços de retorno de chamada são acionados em vários eventos do jogador, para que você possa tomar outras ações quando eles ocorrerem:

Suporte	Descrição
`onReady`	Chamado quando a mídia é carregada e pronta para reprodução
`onPlay`	Chamado quando a mídia inicia ou retoma a reprodução após pausa ou armazenamento em buffer
`onPause`	Chamado quando a mídia está pausada
`onBuffering`	Chamado quando a mídia começa a armazenar em buffer
`onEnded`	Chamado quando a mídia termina de ser reproduzida &nbsp
`onError`	Chamado quando ocorre um erro ao tentar reproduzir mídia

Botões personalizados

Conforme ilustrado na demonstração avançada, o player pode ser substituído por botões personalizados. Há uma seleção de tipos de ação predefinidos com seus próprios ícones e comportamentos ou você pode adicionar os seus próprios com o tipo de ação "personalizado".

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 } /> ;
}

Adereços de botão	Descrição
`action`	Escolha entre ações `custom` ou uma das ações predefinidas: `collapse` , `github` , `mixcloud` , `mute` , `next` , `playpause` , `previous` , `save` , `videos`
`align`	Alinhamento do botão. Escolha entre `left` , `center` , `right`
`label`	Um rótulo de texto de dica para aparecer abaixo do botão atual em foco. As ações de botão predefinidas usam rótulos relevantes.
`faIcon`	Um ícone incrível de fonte. As ações de botão pré-construídas usam ícones relevantes.
`onPress`	Chamado quando um botão é pressionado. As ações de botão pré-construídas têm seus próprios comportamentos.
`onRelease`	Chamado quando um botão é liberado. Atualmente não utilizado.
`isSelectedFill`	Permite suporte ao comportamento de alternância (na forma de preenchimento de botão) quando definido como verdadeiro.
`disable`	Impede a ação do botão quando definido como verdadeiro.

Gancho useSavedItems

Este gancho personalizado é usado para atualizar e recuperar programas favoritos/curtidos pelo usuário. O trecho abaixo da demonstração avançada ilustra como carregar o player com dados salvos 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 Gancho

Para obter mais controle, você pode importar o gancho personalizado useStore para acessar globalmente o estado do player. Veja os componentes internos como mixmotion PlayerUI para exemplos de uso. O trecho abaixo mostra o uso básico para obter o título atual do programa e o estado de reprodução:

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 . . . / > ;