mixmotion Download - mixmotion Quellcode herunterladen

mixmotion

Website-Daten

1.0.0

Herunterladen

mixmotion Player

Ein immersiver Musikplayer mit Mixcloud-Integration und dynamischen visuellen Effekten

Klicken Sie auf das Bild, um die App auszuprobieren

Wie zu verwenden

Für Gelegenheitsnutzer, die einfach nur neue Musik im Vollbildmodus entdecken möchten, klicken Sie auf das Bild oben oder den Link unten, um die mixmotion Web-App auf Ihrem Mobilgerät, Desktop oder TV-Gerät zu starten.

Probieren Sie die App aus?

https://lewhunt.github.io/mixmotion

Bei der Wiedergabe gelangen Sie in einen immersiven Lean-Back-Modus, in dem nach einigen Sekunden Inaktivität des Benutzers eine Vielzahl dynamischer Hintergründe angezeigt werden. Unten sehen Sie ein kurzes Video des Übergangs der App zwischen den Wiedergabemodi:

Weitere Screenshots und Videos finden Sie am Ende dieses Dokuments.

Installation

Entwickler können mixmotion Player auch als Open-Source-Komponente zur Verwendung in React-Apps installieren. Die schnellste Installationsmethode erfolgt über den folgenden Befehl npm i. Alternativ können Sie es manuell integrieren, indem Sie den lib-Ordner in diesem Repo zusammen mit den zugehörigen Abhängigkeiten abrufen.

npm install mixmotion -player

Grundlegende Verwendung

Importieren Sie den Player und rendern Sie mixmotion Player in Ihrer eigenen App mit einer Mixcloud-URL. Für die anderen nicht deklarierten Requisiten werden Standardeinstellungen verwendet.

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 ;

Erweiterte Nutzung

Die erweiterte Demo und die offizielle Web-App veranschaulichen, wie die Komponente weiter angepasst werden kann. Requisiten werden für benutzerdefinierte Schaltflächen, Videohintergründe und lokale Daten (gespeicherte Elemente) angegeben. Eine vollständige Liste der Requisiten finden Sie weiter unten auf dieser Seite.

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 >

Warum ein anderer Musikplayer?

Es gibt bereits zahlreiche Webplayer und Widgets von Soundcloud und Mixcloud, die Sie in Ihre App integrieren können.

mixmotion bietet etwas anderes; ein immersives Vollbild-Wiedergabeerlebnis mit einzigartigen visuellen Effekten und bietet gleichzeitig kostenlosen Zugriff auf den umfangreichen Musikkatalog von Mixcloud.

Was zeichnet es aus?

Mixcloud-Integration : Einfacher, aber vielseitiger Zugriff auf Mixcloud-Inhalte, der über das offizielle Widget hinausgeht. Greifen Sie auf Playlists, Benutzersets, Genres, Tags und einzelne Shows zu, mit der Möglichkeit, Favoriten privat über den lokalen Speicher zu speichern und Mixe zu teilen.
Dynamische Visuals : Kunstwerke kombiniert mit Leinwandeffekten und Videobewegungshintergründen erzeugen eine fesselnde Bildmischung in einem reichhaltigen, immersiven Musikplayer.
Umfassende Geräteunterstützung : Entwickelt für Mobil-, Desktop- und TV-Geräte. Touch-, Cursor- und Pfeiltastennavigation sorgen für ein reibungsloses Benutzererlebnis auf allen Plattformen.
Zukünftige Überlegungen : Integration mit lokalen Dateipfaden, Audiostreams und anderen Musikdiensten wie Soundcloud. Auch Echtzeit-Audiovisualisierungen und Beat-Erkennung werden in Betracht gezogen.

Wie funktioniert es?

Unter der Haube basiert die Komponente auf der offiziellen Mixcloud-API und dem Mixcloud-Widget.

Es nutzt auch eine andere benutzerdefinierte Komponente von mir – Dynamic Background –, um eine Mischung aus Videos mit Ebenen mit CSS- und Canvas-Animationseffekten zu erstellen. Videos erhalten zufällige „Mischmodi“, sodass sie mit dem Leinwandhintergrund verschmelzen und verschiedene Farbeffekte erzielen.

Requisiten

Stütze	Beschreibung	Standard
`url`	Die Mixcloud-URL des abzuspielenden Inhalts ◦ Die meisten URLs werden unterstützt, z. B. Wiedergabelisten, Benutzer, Genres, Tags und einzelne Shows/Sets ◦ Dies kann eine vollständige URL oder ein teilweiser Mixcloud-Schlüssel sein	null
`showsData`	Ein Array lokal gespeicherter Daten zeigt, die anstelle einer URL verwendet werden können. ◦ Die App nutzt dies für lokal gespeicherte Sendungen.	null
`backdropVideoList`	Ein String-Array aus Hintergrundvideo-URLs, die im Wiedergabemodus in zufälliger Reihenfolge angezeigt werden, wenn keine Benutzeraktivität stattfindet	null
`enableBackdropVideo`	Auf `true` setzen, um die oben genannten Hintergrundvideos anzuzeigen, wenn keine Benutzeraktivität stattfindet. ◦ Die Schaltfläche zum Umschalten von Videos in der Benutzeroberfläche (und die Markierung für den lokalen Speicher) überschreibt dies	`false`
`enableUserLink`	Auf `true` setzen, um den Benutzer-/Künstler-Untertitel in einen React-Router-Link umzuwandeln. (wird in der bereitgestellten App verwendet)	`false`
`collapsed`	Auf `true` setzen, um die Metadaten und Steuerelemente des Players zu minimieren und Platz für andere Inhalte zu schaffen. ◦ Wird in der App für Startseiten- und Suchseiteninhalte verwendet.	`false`
`activityTimeout`	Überschreiben Sie den Timeout-Zeitraum der Benutzerinaktivität, der dann während der Wiedergabe einen „inaktiven Modus“ auslöst, um vollständige dynamische Bilder anzuzeigen ◦ Wird in der App verwendet, um längere Zeitüberschreitungen auf Startseiten und Suchseiten bereitzustellen.	`4000`
`showWidget`	Zeigen Sie das offizielle Mixcloud-Widget unten auf der Seite an – mit eigenen Steuerelementen und Fortschrittsbalken – anstelle des benutzerdefinierten Fortschrittsbalkens. ◦ Das offizielle Widget unterstützt keine Pfeiltastennavigation für TV-Geräte.	`false`
`width`	Überschreiben Sie die Breite des Players. ◦ Hinweis: Vollbild ist die beabsichtigte Benutzererfahrung mit überlagerten Inhalten ◦ Möglicherweise müssen Sie das CSS ändern, wenn Sie die Breite überschreiben	`100%`
`height`	Überschreiben Sie die Größe des Spielers. ◦ Hinweis: Vollbild ist die beabsichtigte Benutzererfahrung mit überlagerten Inhalten ◦ Möglicherweise müssen Sie das CSS ändern, wenn Sie die Höhe überschreiben	`100%`
`customButtons`	Geben Sie eine Sammlung benutzerdefinierter Schaltflächen für die Player-Benutzeroberfläche an ◦ Eine Reihe von Standardschaltflächen wird verwendet, wenn keine angegeben werden.	`null`
`autoplay`	Auf `false` setzen, um den Versuch der automatischen Wiedergabe von Inhalten zu deaktivieren	`true`
`withExclusives`	Auf `true` setzen, um exklusive Inhalte aus der Mixcloud-API einzuschließen. ◦ Hinweis: Es ist unwahrscheinlich, dass exklusive Inhalte ohne weitere Entwicklung zur Unterstützung der Mixcloud-Benutzeranmeldeauthentifizierung abgespielt werden	`false`
`listIndex`	Legen Sie die anfängliche `number` fest, wenn Sie mehrere Shows/Sets in der angeforderten URL oder im lokalen showData-Array haben	`0`
`style`	Fügen Sie dem Player Inline-CSS-Stile hinzu	`null`

Rückruf-Requisiten

Rückruf-Requisiten werden bei verschiedenen Spielerereignissen ausgelöst, sodass Sie bei ihrem Eintreten weitere Maßnahmen ergreifen können:

Stütze	Beschreibung
`onReady`	Wird aufgerufen, wenn das Medium geladen und abspielbereit ist
`onPlay`	Wird aufgerufen, wenn Medien nach dem Anhalten oder Puffern gestartet oder wieder abgespielt werden
`onPause`	Wird aufgerufen, wenn die Medien angehalten sind
`onBuffering`	Wird aufgerufen, wenn das Medium mit der Pufferung beginnt
`onEnded`	Wird aufgerufen, wenn die Medienwiedergabe beendet ist &nbsp
`onError`	Wird aufgerufen, wenn beim Versuch, Medien abzuspielen, ein Fehler auftritt

Benutzerdefinierte Schaltflächen

Wie in der erweiterten Demo gezeigt, kann der Player mit benutzerdefinierten Schaltflächen überschrieben werden. Es gibt eine Auswahl vorgefertigter Aktionstypen mit eigenen Symbolen und Verhaltensweisen. Sie können aber auch Ihre eigenen mit dem Aktionstyp „Benutzerdefiniert“ hinzufügen.

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

Knopf-Requisiten	Beschreibung
`action`	Wählen Sie aus `custom` oder einer der vorgefertigten Aktionen: `collapse` , `github` , `mixcloud` , `mute` , `next` , `playpause` , `previous` , `save` , `videos`
`align`	Ausrichtung der Schaltfläche. Wählen Sie zwischen `left` , `center` und `right`
`label`	Eine Hinweistextbeschriftung, die unter der aktuell fokussierten Schaltfläche angezeigt wird. Vorgefertigte Schaltflächenaktionen verwenden relevante Beschriftungen.
`faIcon`	Eine schriftartgeile Ikone. Vorgefertigte Schaltflächenaktionen verwenden relevante Symbole.
`onPress`	Wird aufgerufen, wenn eine Taste gedrückt wird. Vorgefertigte Schaltflächenaktionen haben ihr eigenes Verhalten.
`onRelease`	Wird aufgerufen, wenn eine Taste losgelassen wird. Derzeit unbenutzt.
`isSelectedFill`	Ermöglicht die Unterstützung des Umschaltverhaltens (in Form einer Schaltflächenfüllung), wenn es auf „true“ gesetzt ist.
`disable`	Verhindert Tastenaktionen, wenn auf „true“ gesetzt.

useSavedItems-Hook

Dieser benutzerdefinierte Hook wird zum Aktualisieren und Abrufen von Sendungen verwendet, die vom Benutzer favorisiert/geliked werden. Der folgende Ausschnitt aus der erweiterten Demo zeigt, wie der Player mit lokal gespeicherten Daten geladen wird.

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

Für mehr Kontrolle können Sie den benutzerdefinierten Hook useStore importieren, um global auf den Player-Status zuzugreifen. Anwendungsbeispiele finden Sie in den inneren Komponenten wie mixmotion PlayerUI . Der folgende Ausschnitt zeigt die grundlegende Verwendung zum Abrufen des aktuellen Showtitels und des Wiedergabestatus:

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