ホーム>Web サイト構築リソース>ウェブサイトデータ
ダウンロード

mixmotionプレーヤー

Mixcloud 統合とダイナミックな視覚効果を備えた没入型音楽プレーヤー

画像をクリックしてアプリを試してください

使用方法

フルスクリーンのビジュアルで新しい音楽を見つけたいだけのカジュアル ユーザーの場合は、上の画像または下のリンクをクリックして、モバイル、デスクトップ、または TV デバイスでmixmotion Web アプリを起動してください。

アプリを試してみませんか?

https://lewhunt.github.io/mixmotion

再生すると、没入型の前傾モードに入り、数秒間ユーザーが操作を行わないと、多種多様なダイナミックな背景が表示されます。以下は、アプリが再生モード間で移行する様子を示す簡単なビデオです。

このドキュメントの最後には、その他のスクリーンショットとビデオが掲載されています。

インストール

開発者は、React アプリで使用するオープン ソース コンポーネントとしてmixmotion Player をインストールすることもできます。最も簡単なインストール方法は、以下の npm i コマンドを使用することです。あるいは、このリポジトリ内の lib フォルダーと関連する依存関係を取得して、手動で統合します。 

npm install mixmotion -player

基本的な使い方

プレーヤーをインポートし、Mixcloud URL を使用して独自のアプリにmixmotionプレーヤーをレンダリングします。他の宣言されていないプロパティにはデフォルト設定が使用されます。

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 などから、アプリに統合できる Web プレーヤーやウィジェットがすでに多数提供されています。

mixmotion何か違うものを提供します。ユニークな視覚効果を備えた没入型のフルスクリーン再生体験を提供しながら、Mixcloud の膨大な音楽カタログへの無料アクセスを提供します。

何が他と違うのか？

  • Mixcloud 統合: 公式ウィジェットを超えた Mixcloud コンテンツへのシンプルかつ多用途なアクセス。プレイリスト、ユーザー セット、ジャンル、タグ、個々の番組にアクセスし、ローカル ストレージ経由でお気に入りをプライベートに保存したり、ミックスを共有したりすることができます。
  • ダイナミックなビジュアル: アートワークとキャンバス エフェクトおよびビデオ モーションの背景を組み合わせることで、リッチで没入感のある音楽プレーヤー内に魅惑的な画像のブレンドが生成されます。
  • 幅広いデバイスのサポート: モバイル、デスクトップ、TV デバイス向けに設計されています。タッチ、カーソル、矢印キーによるナビゲーションにより、プラットフォーム間でのユーザー エクスペリエンスがスムーズになります。
  • 将来の考慮事項: ローカル ファイル パス、オーディオ ストリーム、Soundcloud などの他の音楽サービスとの統合。リアルタイムのオーディオ視覚化やビート検出も検討されています。

仕組みは?

内部では、コンポーネントは公式の Mixcloud API と Mixcloud ウィジェットの上に構築されています。

また、私の別のカスタム コンポーネントであるダイナミック バックドロップも利用して、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 ウィジェットをページの下部に表示します。
◦ 公式ウィジェットは、TV デバイスの矢印キー ナビゲーションをサポートしていません。		 false
widthプレーヤーの幅をオーバーライドします。
◦ 注: 全画面表示は意図されたユーザー エクスペリエンスであり、コンテンツが重ねて表示されます。
◦ 幅をオーバーライドする場合は、CSS の変更が必要になる場合があります。		 100%
heightプレーヤーの高さをオーバーライドします。
◦ 注: 全画面表示は意図されたユーザー エクスペリエンスであり、コンテンツが重ねて表示されます。
◦ 高さをオーバーライドする場合は、CSS の変更が必要になる場合があります。		 100%
customButtonsプレーヤー UI のカスタム ボタンのコレクションを指定します
◦ 何も指定しない場合は、デフォルトのボタンのセットが使用されます。		 null
autoplayコンテンツの自動再生の試行を無効にするには、 falseに設定します。 true
withExclusives Mixcloud API からの限定コンテンツを含めるにはtrueに設定します。
◦ 注: 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フック

さらに制御するには、 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 . . . / > ;

アプリのスクリーンショットとビデオ

デスクトップ上のプレーヤー UIモバイルで

検索ページ

再生モード

再生モード（例1）

クリックすると YouTube でプロモーションビデオが表示されます


サポート

これがアプリとコンポーネントへの良い紹介になったことを願っています。

フィードバック、リクエスト、問題がある場合は、コメントしてください。

コンポーネントが気に入った場合、またはブックマークしたい場合は、スターを付けてください


拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて