الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

مشغل mixmotion

مشغل موسيقى غامر مع تكامل Mixcloud وتأثيرات بصرية ديناميكية

انقر على الصورة لتجربة التطبيق

كيفية الاستخدام

بالنسبة للمستخدمين العاديين الذين يرغبون فقط في اكتشاف بعض الموسيقى الجديدة باستخدام صور مرئية بملء الشاشة، اضغط على الصورة أعلاه أو الرابط أدناه لتشغيل تطبيق الويب mixmotion على هاتفك المحمول أو سطح المكتب أو جهاز التلفزيون.

جرب التطبيق؟

https://lewhunt.github.io/mixmotion

عند التشغيل، ستدخل إلى وضع الاستلقاء الغامر، مع ظهور مجموعة كبيرة ومتنوعة من الخلفيات الديناميكية بعد بضع ثوانٍ من عدم نشاط المستخدم. يوجد أدناه مقطع فيديو سريع حول انتقال التطبيق بين أوضاع التشغيل:

المزيد من لقطات الشاشة ومقاطع الفيديو في نهاية هذا المستند.

تثبيت

يمكن للمطورين أيضًا تثبيت mixmotion Player كمكون مفتوح المصدر لاستخدامه في تطبيقات React. أسرع طريقة تثبيت هي عبر الأمر npm i أدناه. وبدلاً من ذلك، قم بدمجه يدويًا عن طريق الاستيلاء على المجلد lib في هذا الريبو مع التبعيات المرتبطة به.

mixmotion-player">
npm install mixmotion -player

الاستخدام الأساسي

قم باستيراد المشغل وعرض mixmotion Player في تطبيقك باستخدام عنوان URL الخاص بـ Mixcloud. وسوف يستخدم الإعدادات الافتراضية للدعائم الأخرى غير المعلنة.

mixmotionPlayer } 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;">
 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. ويجري أيضًا النظر في تصورات صوتية في الوقت الفعلي واكتشاف الإيقاع.

كيف يعمل؟

تحت الغطاء، تم بناء المكون على واجهة برمجة التطبيقات الرسمية Mixcloud API وMixcloud Widget.

كما أنه يستخدم أيضًا مكونًا مخصصًا آخر خاص بي - الخلفية الديناميكية - لإنشاء مزيج من مقاطع الفيديو ذات الطبقات مع تأثيرات CSS والرسوم المتحركة. يتم منح مقاطع الفيديو "أوضاع مزج" عشوائية بحيث يتم دمجها مع خلفية اللوحة القماشية لإعطاء تأثيرات ألوان متنوعة.

الدعائم

دعم وصف تقصير
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 لتضمين المحتوى الحصري من Mixcloud API.
◦ ملاحظة: من غير المرجح أن يتم تشغيل المحتوى الحصري دون مزيد من التطوير لدعم مصادقة تسجيل دخول مستخدم Mixcloud		 false
listIndex قم بتعيين number فهرس الوسائط الأولي إذا كان لديك عروض/مجموعات متعددة في عنوان URL المطلوب أو صفيف showData المحلي 0
style إضافة أنماط CSS مضمنة إلى المشغل null

الدعائم رد الاتصال

يتم تنشيط دعائم رد الاتصال في أحداث اللاعبين المختلفة، لذا يمكنك اتخاذ المزيد من الإجراءات عند حدوثها:

دعم وصف
onReady يتم استدعاؤه عندما يتم تحميل الوسائط وتكون جاهزة للتشغيل
onPlay يتم استدعاؤه عند بدء تشغيل الوسائط أو استئناف تشغيلها بعد الإيقاف المؤقت أو التخزين المؤقت
onPause يتم الاتصال به عند إيقاف الوسائط مؤقتًا
onBuffering يتم استدعاؤه عندما يبدأ التخزين المؤقت للوسائط
onEnded يتم الاتصال به عند انتهاء تشغيل الوسائط
&nbsp
onError يتم الاتصال به عند حدوث خطأ أثناء محاولة تشغيل الوسائط

أزرار مخصصة

كما هو موضح في العرض التوضيحي المتقدم، يمكن تجاوز المشغل بأزرار مخصصة. هناك مجموعة مختارة من أنواع الإجراءات المعدة مسبقًا بأيقوناتها وسلوكياتها الخاصة أو يمكنك إضافة أنواع الإجراءات الخاصة بك باستخدام نوع الإجراء "المخصص".

mixmotionPlayer, 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} />; }">
 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 يسمح بدعم سلوك التبديل (في شكل تعبئة زر) عند ضبطه على "صحيح".
disable يمنع إجراء الزر عند ضبطه على "صحيح".

خطاف 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 للحصول على أمثلة للاستخدام. يوضح المقتطف أدناه الاستخدام الأساسي للحصول على عنوان العرض الحالي وحالة التشغيل:

mixmotionPlayer, 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. 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)

انقر لمشاهدة الفيديو الترويجي على موقع يوتيوب


يدعم

آمل أن يكون هذا قد أعطى مقدمة جيدة للتطبيق والمكون.

أطلق النار على تعليق إذا كان لديك أي تعليقات أو طلبات أو مشاكل؟

امنحه نجمة إذا أعجبك المكون أو كنت تريد وضع إشارة مرجعية عليه


يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل