Загрузка mixmotion - загрузка исходного кода mixmotion

mixmotion

Данные веб-сайта

1.0.0

Скачать

mixmotion плеер

Иммерсивный музыкальный проигрыватель с интеграцией Mixcloud и динамическими визуальными эффектами.

Нажмите на изображение, чтобы опробовать приложение

Как использовать

Для обычных пользователей, которые просто хотят открыть для себя новую музыку с полноэкранной графикой, нажмите на изображение выше или ссылку ниже, чтобы запустить веб-приложение mixmotion на своем мобильном устройстве, настольном компьютере или телевизоре.

Попробовать приложение?

https://lewhunt.github.io/mixmotion

При воспроизведении вы перейдете в захватывающий режим откидывания назад с огромным разнообразием динамических фонов, появляющихся после нескольких секунд бездействия пользователя. Ниже приведено краткое видео перехода приложения между режимами воспроизведения:

Больше скриншотов и видео в конце этого документа.

Установка

Разработчики также могут установить mixmotion Player в качестве компонента с открытым исходным кодом для использования в приложениях React. Самый быстрый способ установки — с помощью команды npm i, приведенной ниже. Альтернативно, интегрируйте его вручную, захватив папку lib в этом репозитории вместе со связанными зависимостями.

npm install mixmotion -player

Основное использование

Импортируйте проигрыватель и визуализируйте mixmotion Player в своем приложении с помощью URL-адреса Mixcloud. Он будет использовать настройки по умолчанию для других необъявленных реквизитов.

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 ;

Расширенное использование

Расширенная демо-версия и официальное веб-приложение иллюстрируют дальнейшую настройку компонента. Реквизиты указаны для пользовательских кнопок, видеофонов и локальных данных (сохраненных элементов). Полный список реквизита подробно описан ниже на этой странице.

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 >

Почему еще один музыкальный плеер?

Уже доступно множество веб-плееров и виджетов от Soundcloud и Mixcloud, которые вы можете интегрировать в свое приложение.

mixmotion предлагает нечто иное; захватывающее полноэкранное воспроизведение с уникальными визуальными эффектами и при этом бесплатный доступ к обширному музыкальному каталогу Mixcloud.

Что отличает его?

Интеграция с Mixcloud : простой, но универсальный доступ к контенту Mixcloud, выходящий за рамки официального виджета. Получите доступ к спискам воспроизведения, пользовательским наборам, жанрам, тегам и отдельным шоу с возможностью конфиденциально сохранять избранное в локальном хранилище и делиться миксами.
Динамические визуальные эффекты : графические изображения в сочетании с эффектами холста и фоновым видео создают захватывающее сочетание изображений в богатом, захватывающем музыкальном проигрывателе.
Широкая поддержка устройств : предназначена для мобильных, настольных компьютеров и телевизоров. Сенсорная навигация, курсор и клавиши со стрелками помогают сделать работу пользователя более плавной на разных платформах.
Будущие соображения : Интеграция с локальными путями файлов, аудиопотоками и другими музыкальными сервисами, такими как Soundcloud. Также рассматриваются возможности визуализации звука в реальном времени и обнаружения ритма.

Как это работает?

Под капотом компонент построен на основе официального API Mixcloud и виджета Mixcloud.

Он также использует другой мой собственный компонент — Dynamic Backdrop — для создания смеси видео, наложенных на слои с эффектами анимации CSS и Canvas. Видео получают случайные «режимы наложения», поэтому они сливаются с фоном холста, создавая различные цветовые эффекты.

Реквизит

Опора	Описание	По умолчанию
`url`	URL-адрес Mixcloud контента для воспроизведения ◦ Поддерживается большинство URL-адресов, таких как списки воспроизведения, пользователи, жанры, теги и отдельные шоу/сеты. ◦ Это может быть полный URL-адрес или частичный ключ Mixcloud.	нулевой
`showsData`	Массив локально хранящихся данных показывает данные, которые можно использовать вместо URL-адреса. ◦ Приложение использует это для сохраненных шоу в локальном хранилище.	нулевой
`backdropVideoList`	Строковый массив URL-адресов фоновых видео, которые появляются в случайной последовательности в режиме воспроизведения, когда нет активности пользователя.	нулевой
`enableBackdropVideo`	Установите значение `true` , чтобы показывать вышеуказанные фоновые видео при отсутствии активности пользователя. ◦ Кнопка переключения видео в пользовательском интерфейсе (и флаг локального хранилища) переопределит этот параметр.	`false`
`enableUserLink`	Установите значение `true` , чтобы превратить подзаголовок пользователя/исполнителя в ссылку на маршрутизатор. (используется в развернутом приложении)	`false`
`collapsed`	Установите значение `true` , чтобы свести к минимуму метаданные проигрывателя и элементы управления, чтобы освободить место для другого контента. ◦ Используется в приложении для содержимого домашней страницы и страницы поиска.	`false`
`activityTimeout`	Переопределить период ожидания бездействия пользователя, который затем запускает «неактивный режим» во время воспроизведения для отображения полных динамических визуальных эффектов. ◦ Используется в приложении для увеличения времени ожидания на главной странице и странице поиска.	`4000`
`showWidget`	Отобразите официальный виджет Mixcloud внизу страницы — с собственными элементами управления и индикатором выполнения — вместо пользовательского индикатора выполнения. ◦ Официальный виджет не поддерживает навигацию с помощью клавиш со стрелками для телевизионных устройств.	`false`
`width`	Переопределить ширину плеера. ◦ Примечание: полноэкранный режим — это предполагаемый пользовательский интерфейс с многослойным контентом. ◦ Возможно, вам придется изменить CSS, если вы переопределите ширину.	`100%`
`height`	Переопределить высоту игрока. ◦ Примечание: полноэкранный режим — это предполагаемый пользовательский интерфейс с многоуровневым контентом. ◦ Возможно, вам придется изменить CSS, если вы переопределите высоту.	`100%`
`customButtons`	Укажите коллекцию пользовательских кнопок для пользовательского интерфейса проигрывателя. ◦ Если ни одна не указана, будет использоваться набор кнопок по умолчанию.	`null`
`autoplay`	Установите значение `false` чтобы отключить попытку автоматического воспроизведения контента.	`true`
`withExclusives`	Установите значение `true` , чтобы включить эксклюзивный контент из API Mixcloud. ◦ Примечание. Эксклюзивный контент вряд ли будет воспроизводиться без дальнейшей разработки поддержки аутентификации пользователя при входе в Mixcloud.	`false`
`listIndex`	Установите исходный `number` медиа-индекса, если у вас есть несколько шоу/наборов в запрошенном URL-адресе или локальном массиве showData.	`0`
`style`	добавить встроенные стили CSS в плеер	`null`

Реквизит обратного вызова

Свойства обратного вызова активируются при различных событиях игрока, поэтому вы можете предпринимать дальнейшие действия, когда они происходят:

Опора	Описание
`onReady`	Вызывается, когда носитель загружен и готов к воспроизведению
`onPlay`	Вызывается, когда медиафайлы начинаются или возобновляются после приостановки или буферизации.
`onPause`	Вызывается, когда мультимедиа приостановлено
`onBuffering`	Вызывается, когда медиа начинает буферизацию
`onEnded`	Вызывается, когда медиа завершает воспроизведение &nbsp
`onError`	Вызывается, когда возникает ошибка при попытке воспроизведения мультимедиа.

Пользовательские кнопки

Как показано в расширенной демонстрации, проигрыватель можно переопределить с помощью пользовательских кнопок. Существует выбор предварительно созданных типов действий со своими собственными значками и поведением, или вы можете добавить свои собственные с помощью «настраиваемого» типа действия.

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

Реквизит кнопки	Описание
`action`	Выберите `custom` или одно из готовых действий: `collapse` , `github` , `mixcloud` , `mute` , `next` , `playpause` , `previous` , `save` , `videos`
`align`	Выравнивание кнопки. Выберите `left` , `center` , `right`
`label`	Текстовая метка подсказки, которая появится под текущей кнопкой, находящейся в фокусе. Предварительно созданные действия кнопок используют соответствующие метки.
`faIcon`	Потрясающий значок шрифта. В предварительно созданных действиях кнопок используются соответствующие значки.
`onPress`	Вызывается при нажатии кнопки. Предварительно созданные действия кнопок имеют собственное поведение.
`onRelease`	Вызывается при отпускании кнопки. В настоящее время не используется.
`isSelectedFill`	Разрешает поддержку поведения переключения (в виде заполнения кнопки), если установлено значение true.
`disable`	Предотвращает действие кнопки, если установлено значение true.

Хук useSavedItems

Этот пользовательский крючок используется для обновления и извлечения шоу, которые нравятся пользователю. В приведенном ниже фрагменте расширенной демонстрации показано, как загрузить в плеер локальные сохраненные данные.

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

использоватьStore Hook

Для большего контроля вы можете импортировать специальный хук useStore для глобального доступа к состоянию игрока. Просмотрите внутренние компоненты, такие как mixmotion PlayerUI для примеров использования. В приведенном ниже фрагменте показано базовое использование для получения текущего названия шоу и состояния воспроизведения:

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

Скриншоты и видео приложений


Пользовательский интерфейс проигрывателя на рабочем столе	на мобильном телефоне

Страница поиска

Режим воспроизведения

Режим воспроизведения (пример 1)

Нажмите, чтобы просмотреть промо-видео на YouTube