mixmotion下載 - mixmotion原始碼下載

mixmotion

網站數據

1.0.0

下載

mixmotion播放器

具有 Mixcloud 整合和動態視覺效果的沉浸式音樂播放器

點擊圖像來試試該應用程式

如何使用

對於只想透過全螢幕視覺效果發現一些新音樂的休閒用戶，請點擊上面的圖片或下面的鏈接，在您的移動、桌面或電視設備上啟動mixmotion網絡應用程序。

試試應用程式？

https://lewhunt.github.io/mixmotion

播放時，您將進入沉浸式後仰模式，在使用者不活動幾秒鐘後會出現各種各樣的動態背景。以下是應用程式在播放模式之間轉換的快速影片：

更多螢幕截圖和影片位於本文檔末尾。

安裝

開發人員也可以安裝mixmotion Player 作為開源元件以在 React 應用程式中使用。最快的安裝方法是透過下面的 npm i 命令。或者，透過獲取此儲存庫中的 lib 資料夾以及關聯的依賴項來手動整合它。

npm install mixmotion -player

基本用法

導入播放器並使用 Mixcloud URL 在您自己的應用程式中渲染mixmotion Player。它將使用其他未聲明的道具的預設設定。

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 ;

進階用法

進階演示和官方 Web 應用程式說明如何進一步自訂元件。道具是為自訂按鈕、影片背景和本機資料（已儲存的項目）指定的。本頁下方詳細介紹了完整的道具清單。

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）整合。即時音訊視覺化和節拍偵測也在考慮之中。

它是如何運作的？

在底層，該元件建構在官方 Mixcloud API 和 Mixcloud Widget 之上。

它還利用我的另一個自訂元件 - 動態背景 - 創建帶有 css 和畫布動畫效果分層的視訊混合。影片被賦予隨機的“混合模式”，因此它們與畫布背景合併以產生各種顏色效果。

道具

支柱	描述	預設
`url`	要播放的內容的 Mixcloud URL ◦ 支援大多數 URL，例如播放清單、使用者、類型、標籤和單一節目/集 ◦ 這可以是完整的 URL 或部分 Mixcloud 金鑰	無效的
`showsData`	本機儲存的陣列顯示可以用來取代 URL 的資料。 ◦ 該應用程式將其用於本地儲存保存的節目。	無效的
`backdropVideoList`	後台影片 URL 的字串數組，當沒有使用者活動時，在播放模式下以隨機順序出現	無效的
`enableBackdropVideo`	設定為`true`可在沒有使用者活動時顯示上述背景影片。 ◦ UI 中的視訊切換按鈕（和本機儲存標誌）將覆蓋此設置	`false`
`enableUserLink`	設定為`true`將使用者/藝術家副標題轉換為反應路由器連結。（在部署的應用程式中使用）	`false`
`collapsed`	設定為`true`可最小化播放器元資料和控件，以便為其他內容騰出空間。 ◦ 在應用程式中用於主頁和搜尋頁面內容。	`false`
`activityTimeout`	覆蓋使用者不活動的超時時間，然後在播放期間觸發「不活動模式」以顯示完整的動態視覺效果 ◦ 在應用程式中用於在主頁和搜尋頁面中提供更長的逾時時間。	`4000`
`showWidget`	在頁面底部顯示官方 Mixcloud 小工具 - 帶有自己的控制項和進度列 - 而不是自訂進度欄。 ◦ 官方小工具不支援電視設備的箭頭鍵導航。	`false`
`width`	覆蓋播放器的寬度。 ◦ 注意：全螢幕是預期的使用者體驗，內容分層 ◦ 如果您覆蓋寬度，則可能需要修改 CSS	`100%`
`height`	覆蓋玩家的高度。 ◦ 注意：全螢幕是預期的使用者體驗，內容分層 ◦ 如果您覆蓋高度，則可能需要修改 CSS	`100%`
`customButtons`	為播放器 UI 指定自訂按鈕的集合 ◦ 如果未指定，將使用一組預設按鈕。	`null`
`autoplay`	設定為`false`以停用自動播放內容的嘗試	`true`
`withExclusives`	設定為`true`以包含來自 Mixcloud API 的獨家內容。 ◦ 注意：如果不進一步開發以支援 Mixcloud 使用者登入驗證，則不可能播放獨佔內容	`false`
`listIndex`	如果請求的 URL 或本機 showData 陣列中有多個節目/集，請設定初始媒體索引`number`	`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 }
    />
  ) ;
}

使用儲存鉤子

為了獲得更多控制，您可以匯入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 . . . / > ;