unduhan mixmotion - pengunduhan kode sumber mixmotion

mixmotion

Data situs web

1.0.0

Unduh

Pemain mixmotion

Pemutar musik yang imersif dengan integrasi Mixcloud dan efek visual dinamis

Klik gambar untuk mencoba aplikasinya

Cara menggunakan

Untuk pengguna biasa yang hanya ingin menemukan musik baru dengan visual layar penuh, tekan gambar di atas atau tautan di bawah untuk meluncurkan aplikasi web mixmotion di perangkat seluler, desktop, atau TV Anda.

Mencoba Aplikasinya?

https://lewhunt.github.io/mixmotion

Saat pemutaran, Anda akan memasuki mode bersandar yang imersif, dengan beragam latar belakang dinamis yang muncul setelah beberapa detik pengguna tidak aktif. Di bawah ini adalah video singkat transisi aplikasi antar mode pemutaran:

Tangkapan layar dan video lainnya di akhir dokumen ini.

Instalasi

Pengembang juga dapat menginstal mixmotion Player sebagai komponen sumber terbuka untuk digunakan dalam aplikasi React. Metode instalasi tercepat adalah melalui perintah npm i di bawah. Alternatifnya, integrasikan secara manual dengan mengambil folder lib di repo ini beserta dependensi terkait.

npm install mixmotion -player

Penggunaan Dasar

Impor pemutar dan render mixmotion Player di aplikasi Anda sendiri dengan URL Mixcloud. Ini akan menggunakan pengaturan default untuk props lain yang tidak dideklarasikan.

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 ;

Penggunaan Tingkat Lanjut

Demo lanjutan dan aplikasi web resmi menggambarkan bagaimana komponen dapat dikustomisasi lebih lanjut. Alat peraga ditentukan untuk tombol khusus, latar belakang video, dan data lokal (item yang disimpan). Daftar lengkap alat peraga dirinci lebih lanjut di halaman ini.

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 >

Mengapa Pemutar Musik Lain?

Ada banyak pemutar web dan widget yang sudah tersedia seperti Soundcloud dan Mixcloud yang dapat Anda integrasikan ke dalam aplikasi Anda.

mixmotion menawarkan sesuatu yang berbeda; pengalaman pemutaran layar penuh yang mendalam dengan efek visual yang unik, sambil tetap memberikan akses gratis ke katalog musik Mixcloud yang luas.

Apa yang Membedakannya?

Integrasi Mixcloud : Akses sederhana namun serbaguna ke konten Mixcloud yang melampaui widget resmi mereka. Akses daftar putar, kumpulan pengguna, genre, tag, dan acara individual, dengan kemampuan menyimpan favorit secara pribadi melalui penyimpanan lokal dan berbagi campuran.
Visual Dinamis : Karya seni yang dipadukan dengan efek kanvas dan latar belakang gerakan video menghasilkan perpaduan citra yang menawan dalam pemutar musik yang kaya dan imersif.
Dukungan Perangkat Luas : Dirancang untuk perangkat seluler, desktop, dan TV. Navigasi sentuh, kursor, dan tombol panah membantu menjadikan pengalaman pengguna lancar di seluruh platform.
Pertimbangan Masa Depan : Integrasi dengan jalur file lokal, aliran audio, dan layanan musik lainnya seperti Soundcloud. Visualisasi audio real-time dan deteksi ketukan juga sedang dipertimbangkan.

Bagaimana cara kerjanya?

Di balik terpalnya, komponen ini dibangun di atas API Mixcloud resmi dan Widget Mixcloud.

Itu juga menggunakan komponen khusus saya yang lain - Latar Belakang Dinamis - untuk membuat perpaduan video yang dilapisi dengan efek animasi css dan kanvas. Video diberikan 'blend mode' secara acak sehingga menyatu dengan latar belakang kanvas untuk memberikan berbagai efek warna.

Alat peraga

Menopang	Keterangan	Bawaan
`url`	URL Mixcloud dari konten yang akan diputar ◦ Sebagian besar URL didukung seperti daftar putar, pengguna, genre, tag, dan acara/kumpulan individual ◦ Ini bisa berupa URL lengkap atau sebagian kunci Mixcloud	batal
`showsData`	Array yang disimpan secara lokal menunjukkan data yang dapat digunakan sebagai pengganti URL. ◦ Aplikasi ini menggunakan ini untuk acara yang disimpan di penyimpanan lokal.	batal
`backdropVideoList`	Serangkaian string URL video latar belakang yang muncul dalam urutan acak selama mode pemutaran ketika tidak ada aktivitas pengguna	batal
`enableBackdropVideo`	Setel ke `true` untuk menampilkan video latar belakang di atas saat tidak ada aktivitas pengguna. ◦ Tombol pengalih video di UI (dan tanda penyimpanan lokal) akan menggantikannya	`false`
`enableUserLink`	Setel ke `true` untuk mengubah subjudul pengguna/artis menjadi tautan router reaksi. (digunakan dalam aplikasi yang diterapkan)	`false`
`collapsed`	Setel ke `true` untuk meminimalkan metadata dan kontrol pemutar, guna memberi ruang bagi konten lainnya. ◦ Digunakan dalam aplikasi untuk konten halaman beranda dan pencarian.	`false`
`activityTimeout`	Ganti periode batas waktu ketidakaktifan pengguna, yang kemudian memicu 'mode tidak aktif' selama pemutaran untuk menampilkan visual dinamis penuh ◦ Digunakan dalam aplikasi untuk memberikan periode waktu tunggu yang lebih lama di halaman beranda dan halaman pencarian.	`4000`
`showWidget`	Tampilkan widget Mixcloud resmi di bagian bawah halaman - dengan kontrol dan bilah kemajuannya sendiri - alih-alih bilah kemajuan khusus. ◦ Widget resmi tidak mendukung navigasi tombol panah untuk perangkat TV.	`false`
`width`	Ganti lebar pemutar. ◦ Catatan: layar penuh adalah pengalaman pengguna yang diinginkan, dengan konten berlapis ◦ Anda mungkin perlu memodifikasi CSS jika Anda mengganti lebar	`100%`
`height`	Abaikan tinggi pemain. ◦ Catatan: layar penuh adalah pengalaman pengguna yang diinginkan, dengan konten berlapis ◦ Anda mungkin perlu memodifikasi CSS jika Anda mengganti ketinggian	`100%`
`customButtons`	Tentukan kumpulan tombol khusus untuk UI pemutar ◦ Serangkaian tombol default akan digunakan jika tidak ada yang ditentukan.	`null`
`autoplay`	Setel ke `false` untuk menonaktifkan upaya memutar konten secara otomatis	`true`
`withExclusives`	Setel ke `true` untuk menyertakan konten eksklusif dari Mixcloud API. ◦ Catatan: konten eksklusif tidak mungkin diputar tanpa pengembangan lebih lanjut untuk mendukung otentikasi masuk pengguna Mixcloud	`false`
`listIndex`	Tetapkan `number` indeks media awal jika Anda memiliki beberapa tayangan/kumpulan di URL yang diminta atau larik showData lokal	`0`
`style`	tambahkan gaya CSS sebaris ke pemutar	`null`

Alat Peraga Panggilan Balik

Alat peraga panggilan balik diaktifkan pada berbagai peristiwa pemain, sehingga Anda dapat mengambil tindakan lebih lanjut ketika peristiwa itu terjadi:

Menopang	Keterangan
`onReady`	Dipanggil ketika media dimuat dan siap diputar
`onPlay`	Dipanggil ketika media memulai atau melanjutkan pemutaran setelah dijeda atau di-buffer
`onPause`	Dipanggil ketika media dijeda
`onBuffering`	Dipanggil ketika media mulai melakukan buffering
`onEnded`	Dipanggil ketika media selesai diputar &nbsp
`onError`	Dipanggil ketika terjadi kesalahan saat mencoba memutar media

Tombol Kustom

Seperti yang diilustrasikan dalam demo lanjutan, pemain dapat diganti dengan tombol khusus. Ada pilihan jenis tindakan yang telah dibuat sebelumnya dengan ikon dan perilakunya sendiri atau Anda dapat menambahkan jenis tindakan Anda sendiri dengan jenis tindakan "kustom".

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

Alat Peraga Tombol	Keterangan
`action`	Pilih dari `custom` atau salah satu tindakan yang dibuat sebelumnya: `collapse` , `github` , `mixcloud` , `mute` , `next` , `playpause` , `previous` , `save` , `videos`
`align`	Penyelarasan tombol. Pilih dari `left` , `center` , `right`
`label`	Label teks petunjuk akan muncul di bawah tombol saat ini dalam fokus. Tindakan tombol yang dibuat sebelumnya menggunakan label yang relevan.
`faIcon`	Ikon font yang mengagumkan. Tindakan tombol yang dibuat sebelumnya menggunakan ikon yang relevan.
`onPress`	Dipanggil saat tombol ditekan. Tindakan tombol yang dibuat sebelumnya memiliki perilakunya sendiri.
`onRelease`	Dipanggil saat tombol dilepaskan. Saat ini tidak digunakan.
`isSelectedFill`	Mengizinkan dukungan perilaku peralihan (dalam bentuk pengisian tombol) bila disetel ke true.
`disable`	Mencegah tindakan tombol bila disetel ke true.

gunakan Kait SavedItems

Kait khusus ini digunakan untuk memperbarui dan mengambil acara yang difavoritkan/disukai oleh pengguna. Cuplikan di bawah dari demo lanjutan mengilustrasikan cara memuat pemutar dengan data tersimpan lokal.

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

gunakan Store Hook

Untuk kontrol lebih lanjut, Anda dapat mengimpor kait khusus useStore untuk mengakses status pemain secara global. Lihat komponen dalam seperti mixmotion PlayerUI untuk contoh penggunaan. Cuplikan di bawah ini menunjukkan penggunaan dasar untuk mendapatkan judul acara dan status pemutaran saat ini:

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