mixmotion Télécharger - mixmotion Téléchargement du code source

mixmotion

Données du site Web

1.0.0

Télécharger

Lecteur mixmotion

Un lecteur de musique immersif avec intégration Mixcloud et effets visuels dynamiques

Cliquez sur l'image pour essayer l'application

Comment utiliser

Pour les utilisateurs occasionnels qui souhaitent simplement découvrir de nouvelles musiques avec des visuels en plein écran, cliquez sur l'image ci-dessus ou sur le lien ci-dessous pour lancer l'application Web mixmotion sur votre appareil mobile, de bureau ou de télévision.

Essayer l'application ?

https://lewhunt.github.io/mixmotion

Lors de la lecture, vous entrerez dans un mode immersif, avec une grande variété d’arrière-plans dynamiques apparaissant après quelques secondes d’inactivité de l’utilisateur. Vous trouverez ci-dessous une vidéo rapide de l'application passant d'un mode de lecture à l'autre :

Plus de captures d'écran et de vidéos à la fin de ce document.

Installation

Les développeurs peuvent également installer mixmotion Player en tant que composant open source à utiliser dans les applications React. La méthode d'installation la plus rapide consiste à utiliser la commande npm i ci-dessous. Vous pouvez également l'intégrer manuellement en récupérant le dossier lib dans ce référentiel ainsi que les dépendances associées.

npm install mixmotion -player

Utilisation de base

Importez le lecteur et affichez mixmotion Player dans votre propre application avec une URL Mixcloud. Il utilisera les paramètres par défaut pour les autres accessoires non déclarés.

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 ;

Utilisation avancée

La démo avancée et l'application Web officielle illustrent comment le composant peut être personnalisé davantage. Des accessoires sont spécifiés pour les boutons personnalisés, les arrière-plans vidéo et les données locales (éléments enregistrés). Une liste complète des accessoires est détaillée plus bas sur cette page.

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 >

Pourquoi un autre lecteur de musique ?

Il existe de nombreux lecteurs Web et widgets déjà disponibles, comme Soundcloud et Mixcloud, que vous pouvez intégrer à votre application.

mixmotion propose quelque chose de différent ; une expérience de lecture immersive en plein écran avec des effets visuels uniques, tout en offrant un accès gratuit au vaste catalogue musical de Mixcloud.

Qu’est-ce qui le distingue ?

Intégration Mixcloud : accès simple mais polyvalent au contenu Mixcloud qui va au-delà de leur widget officiel. Accédez aux listes de lecture, aux ensembles d'utilisateurs, aux genres, aux tags et aux émissions individuelles, avec la possibilité d'enregistrer vos favoris en privé via le stockage local et de partager des mix.
Visuels dynamiques : des illustrations combinées à des effets de toile et à des arrière-plans animés vidéo génèrent un mélange captivant d'images dans un lecteur de musique riche et immersif.
Prise en charge étendue des appareils : conçu pour les appareils mobiles, de bureau et TV. La navigation tactile, avec le curseur et les touches fléchées contribue à rendre l'expérience utilisateur fluide sur toutes les plateformes.
Considérations futures : Intégration avec les chemins de fichiers locaux, les flux audio et d'autres services musicaux comme Soundcloud. Les visualisations audio en temps réel et la détection des battements sont également envisagées.

Comment ça marche ?

Sous le capot, le composant est construit sur l'API officielle Mixcloud et le widget Mixcloud.

Il utilise également un autre de mes composants personnalisés - Dynamic Toile de fond - pour créer un mélange de vidéos superposées avec des effets d'animation CSS et Canvas. Les vidéos reçoivent des « modes de fusion » aléatoires afin qu'elles fusionnent avec l'arrière-plan du canevas pour donner divers effets de couleur.

Accessoires

Soutenir	Description	Défaut
`url`	L'URL Mixcloud du contenu à lire ◦ La plupart des URL sont prises en charge, telles que les listes de lecture, les utilisateurs, les genres, les balises et les émissions/ensembles individuels ◦ Il peut s'agir d'une URL complète ou d'une clé Mixcloud partielle	nul
`showsData`	Un tableau de données stockées localement affiche des données qui peuvent être utilisées à la place d'une URL. ◦ L'application l'utilise pour les émissions enregistrées sur le stockage local.	nul
`backdropVideoList`	Un tableau de chaînes d'URL de vidéos d'arrière-plan qui apparaissent dans une séquence aléatoire pendant le mode de lecture lorsqu'il n'y a aucune activité de l'utilisateur	nul
`enableBackdropVideo`	Définissez sur `true` pour afficher les vidéos d'arrière-plan ci-dessus lorsqu'il n'y a aucune activité de l'utilisateur. ◦ Le bouton bascule vidéo dans l'interface utilisateur (et l'indicateur de stockage local) remplaceront cela	`false`
`enableUserLink`	Définissez sur `true` pour transformer le sous-titre utilisateur/artiste en un lien de réaction-routeur. (utilisé dans l'application déployée)	`false`
`collapsed`	Définissez sur `true` pour minimiser les métadonnées et les contrôles du lecteur, afin de libérer de l'espace pour d'autres contenus. ◦ Utilisé dans l'application pour le contenu des pages d'accueil et de recherche.	`false`
`activityTimeout`	Remplacez le délai d'inactivité de l'utilisateur, qui déclenche ensuite un « mode inactif » pendant la lecture pour afficher des visuels entièrement dynamiques. ◦ Utilisé dans l'application pour fournir des délais d'attente plus longs dans les pages d'accueil et de recherche.	`4000`
`showWidget`	Affichez le widget officiel Mixcloud en bas de la page - avec ses propres commandes et barre de progression - au lieu de la barre de progression personnalisée. ◦ Le widget officiel ne prend pas en charge la navigation par touches fléchées pour les appareils TV.	`false`
`width`	Remplacez la largeur du lecteur. ◦ Remarque : le plein écran est l'expérience utilisateur prévue, avec du contenu superposé ◦ Vous devrez peut-être modifier le CSS si vous remplacez la largeur	`100%`
`height`	Remplacez la hauteur du joueur. ◦ Remarque : le plein écran est l'expérience utilisateur prévue, avec du contenu superposé ◦ Vous devrez peut-être modifier le CSS si vous remplacez la hauteur	`100%`
`customButtons`	Spécifier une collection de boutons personnalisés pour l'interface utilisateur du lecteur ◦ Un ensemble de boutons par défaut sera utilisé si aucun n'est spécifié.	`null`
`autoplay`	Définir sur `false` pour désactiver la tentative de lecture automatique du contenu	`true`
`withExclusives`	Définissez sur `true` pour inclure le contenu exclusif de l'API Mixcloud. ◦ Remarque : il est peu probable que le contenu exclusif soit lu sans développement supplémentaire pour prendre en charge l'authentification de connexion des utilisateurs Mixcloud.	`false`
`listIndex`	Définissez le `number` d'index multimédia initial si vous avez plusieurs émissions/ensembles dans l'URL demandée ou dans le tableau showData local	`0`
`style`	ajouter des styles CSS en ligne au lecteur	`null`

Accessoires de rappel

Les accessoires de rappel sont déclenchés lors de divers événements de joueur, vous pouvez donc prendre d'autres mesures lorsqu'ils se produisent :

Soutenir	Description
`onReady`	Appelé lorsque le média est chargé et prêt à être lu
`onPlay`	Appelé lorsque le média démarre ou reprend la lecture après une pause ou une mise en mémoire tampon
`onPause`	Appelé lorsque le média est en pause
`onBuffering`	Appelé lorsque le média commence la mise en mémoire tampon
`onEnded`	Appelé lorsque la lecture du média est terminée &nbsp
`onError`	Appelé lorsqu'une erreur se produit lors de la tentative de lecture multimédia

Boutons personnalisés

Comme illustré dans la démo avancée, le lecteur peut être remplacé par des boutons personnalisés. Il existe une sélection de types d'actions prédéfinis avec leurs propres icônes et comportements, ou vous pouvez ajouter les vôtres avec le type d'action « personnalisé ».

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

Accessoires de boutons	Description
`action`	Choisissez parmi les actions `custom` ou l'une des actions prédéfinies : `collapse` , `github` , `mixcloud` , `mute` , `next` , `playpause` , `previous` , `save` , `videos`
`align`	Alignement du bouton. Choisissez entre `left` , `center` , `right`
`label`	Une étiquette de texte d’indice qui apparaîtra sous le bouton actuellement sélectionné. Les actions de bouton prédéfinies utilisent des étiquettes pertinentes.
`faIcon`	Une icône de police géniale. Les actions de boutons prédéfinies utilisent des icônes pertinentes.
`onPress`	Appelé lorsqu'un bouton est enfoncé. Les actions des boutons prédéfinis ont leurs propres comportements.
`onRelease`	Appelé lorsqu'un bouton est relâché. Actuellement inutilisé.
`isSelectedFill`	Permet la prise en charge du comportement de bascule (sous la forme d'un remplissage de bouton) lorsqu'il est défini sur true.
`disable`	Empêche l’action du bouton lorsqu’il est défini sur true.

crochet useSavedItems

Ce hook personnalisé est utilisé pour mettre à jour et récupérer les émissions préférées/aimées par l'utilisateur. L'extrait ci-dessous de la démo avancée illustre comment charger le lecteur avec les données enregistrées localement.

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

utiliser le crochet de magasin

Pour plus de contrôle, vous pouvez importer le hook personnalisé useStore pour accéder globalement à l'état du joueur. Consultez les composants internes comme mixmotion PlayerUI pour des exemples d'utilisation. L'extrait ci-dessous montre l'utilisation de base pour obtenir le titre de l'émission actuelle et l'état de lecture :

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