Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Vue
Code

أنشئ مشغل موسيقى باستخدام Vuetify

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Ratnawati (you can also view the original English article)

Final product image
What You'll Be Creating

إن بناء التطبيقات باستخدام Vue.js أمر سهل وممتع للغاية، حيث يمكنك إنشاء تطبيق يعمل بصورة جيدة دون أي مجهود يذكر. ولإثبات ذلك، سأريك اليوم مدى سهولة إنشاء تطبيق مشغل الموسيقى الخاصّ بك والذي يتصف بعدد كبير من المميزات. ولجعل الأمور أكثر سهولة، سنستخدم Vuetifyjs، وهي مكتبة لواجهات الاستخدام مدعومة من قبل Vue.js، ومن شأنها تسريع عملية بناء واجهة الاستخدام.يمكنني الشعور بعدم قدرتك على التحمل مدة أطول، لذا لنبدأ الآن.

يمكن الوصول إلى الشيفرة المصدرية كاملة في GitHub، ويمكن مشاهدة نموذج تجريبي من هنا. لمتابعة هذا الدرس، يجب أن تكون قادرًا على التعامل مع Vue components و Vue single file componontes وصيغة ES2015.

مخطّط التطبيق

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

Vue music player wireframe sketch

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

كما يقول John Johnson:

جد حلّاً للمشكلة في البداية، بعدها اكتب الشيفرة.

وانطلاقًا من هذه الكلمة، سنبدا بإنشاء مخطط لتطبيقنا قبل أن نبدأ بكتابة الأكواد.

مكونات التطبيق

Vue.js هو إطار عمل يستند على المكوّنات component-based framework، ولهذا سنحتاج في البداية إلى تقسيم تطبيقنا إلى عدد من المكونات (خمسة في حالتنا هذا وكما هو موضح في المخطط أعلاه)، ثم تحديد الخصائص والوظائف التي يؤديها كل مكوّن.

شريط العنوان

سيحتوي هذا المكوّن على الأجزاء التالية:

  • قائمة في الجانب الأيسر.
  • اسم التطبيق في الوسط.
  • ثلاثة أيقونات ثابتة في الجانب الأيمن.

لوحة المعلومات

سيعرض هذا المكون معلومات خاصة بمسار الموسيقى الذي يعمل في الوقت الحاضر:

  • اسم الفنان وعنوان المسار في الجانب الأيسر.
  • الموقع الحالي للمسار بالإضافة إلى مدّته الكلية في الجانب الأيمن.

شريط التحكم

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

  • مزلاق الصوت والذي يحتوي على أيقونة في اليسار (سيتغير مظهر هذه الأيقونة مع تغير النسبة المئوية لمستوى الصوت وعند كتم الصوت) والنسبة المئوية لمستوى الصوت في الجهة اليمنى.
  • أزرار لتشغيل وإيقاف التشغيل المؤقت وإيقاف التشغيل وتجاوز المسارات الصوتية.
  • زرّان في الجانب الأيمن البعيد: واحدة لإعادة تشغيل المسار الحالي، وأخرى لإعادة ترتيب المسارات عشوائيًا.
  • شريط يعرض الموقع الذي وصل إليه المسار الحالي، مع إمكانية تغيير الموقع عن طريق النقر على الشرط بواسطة الفأرة.

لوحة قائمة التشغيل

يتضمّن هذا المكوّن قائمة التشغيل الخاصة بالمصارات وتؤدي هذه اللوحة الوظائف التالية:

  • تعرض المسار مع الرقم المناسب إضافة إلى اسم الفنان وعنوان المسار ومدّته.
  • اختيار المسار بنقرة واحدة.
  • تشغيل المسار عن طريق النقر المزدوج.

شريط البحث

يقدّم هذا المكون إمكانية البحث عن مسار معيّن وتشغيله.

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

لندخل إذًا إلى الجزء الممتع ونبدأ بكتابة بعض الأكواد.

البداية

تقدّم صفحة البدء السريع في Vuetify العديد من الخيارات التي تساعد في البدء بالعمل. وسنستخدم أحد قوالب Vue CLI المعدّة مسبقًا والذي يدعى Webpack Simple. نفّذ الأوامر التالية ضمن المجلّد الذي ترغب في استخدامه لبناء التطبيق.

ثبّت Vue CLI في البداية:

ثم أنشئ التطبيق:

بعدها توجّه إلى المجلّد الخاص بالتطبيق وثبت جميع الاعتماديات:

سنستخدم مكتبة Howler.js (مكتبة JavaScript متخصّصة بالصوتيات) للتعامل مع الصوتيات في مشغل الموسيقى؛ لذا سنحتاج إلى تضمينها في المشروع أيضًا وذلك عن طريق تنفيذ الأمر التالي:

وأخيرًا شغل التطبيق:

سيفتح التطبيق في العنوان localhost:8080 في المتصفح الافتراضي، ومن المفترض أن تشاهد تطبيق Vuetify بسيط.

تعديل القالب

سنبدأ الآن بإجراء بعض التعديلات على القالب الحالي. أولًأ أعد تسمية الملف App.vue إلى Player.vue، ثم افتحه واحذف محتواه بالكامل، ثم أضف إليه الشيفرة التالية:

سنغلّف تطبيق مشغل الموسيقى ضمن المكوّن v-app، وهو المكون الذي يحتاجه التطبيق ليعمل بصورة صحيحة. كذلك نمرّر الخاصية dark، وذلك لتطبيق السمة الداكنة في Vuetify.

افتح الملف main.js واحذف محتواه بالكامل، وأضف إليه الشيفرة التالية:

افتح كذلك الملف index.html ثم غيّر محتوى الوسم <title> إلى Vue Music Player.

سترى في متصفحك الآن صفحة فارغة ذات لون داكن، وبذلك تصبح جاهزًا للبدء بإنشاء التطبيق.

قبل البدء بكتابة الشيفرة، من المهمّ أن تدرك بأنّ Vuetify تقدّم بعض الشيفرات الجاهزة إضافة إلى خاصية الإكمال التلقائي في الكثير من محرّرات الشيفرات المعروفة، مثل VS Code و Atom و Sublime. وللحصول على الشيفرات الجاهزة ابحث عن عن هذا الملحقات في محرّرك المفضل (vuetify-vscode أو vuetify-atom أو vuetify-sublime).

بناء مكون شريط العنوان

في مجلد src أنشئ مجلّدًا باسم compnontes وأنشئ بداخل هذا المجلد ملفًّا باسم PlayerTitleBar.vue وأضف إليه الشيفرة التالية:

سنستخدم في هذا الملف مكوّنات Vuetify التالية: toolbar و menu و button و icon و list و dialog و card.

يمكننا الفصل بين القائمة والاسم والأيقونة بواسطة المكون <v-spacer>. ولعرض أو إخفاء مربع الحوار، نُنشئ خاصية البيانات dialog: false. وستتغيّر قيمة هذه الخاصية عند النقر على عنصر القائمة About.

والآن سنستورد مكوّن شريط العنوان في ملف Player.vue ونسجّله في كائن المكونات، ونضيفه إلى القالب.

والآن يمكنك الرجوع إلى المتصفح لمشاهدة النتيجة. يجب أن ترى ما يلي:

The player title bar

سنكرّر الخطوات الثلاث السابقة مع المكونات الأربعة الباقية؛ لذا عندما أطلب منك في الأقسام التالية أن تستورد وتسجل وتضيف المكون إلى القالب، فعليك حينئذ أن تنفّذ الخطوات السابقة التي ذكرناها هنا.

بناء مكون قائمة التشغيل

أنشئ في المجلد الجذر مجلدًا جديدًا باسم playlist وأضف الملفات الصوتية التي ترغب في تشغيلها إليه. يجب تسمية الملفات الصوتية بطريقة خاصة، إذ يجب أن تفصل الشرطة السفلية بين الكلمات، ويجب أن تكون الملفات ذات امتداد ‎.mp3، مثل: Remember_the_Way.mp3. أنشئ الآن مصفوفة المسارات الصوتية داخل كائن البيانات في الملف Player.vue.

كل مسار يمتلك الخاصيتين title و artist إضافة إلى كائن howl يأخذ القيمة null، وخاصية display تأخذ القيمة true.

ستستخدم الخاصية display عند إضافة عملية البحث إلى التطبيق. تأخذ هذه الخاصية الآن القيمة true وهذا يعني أنّ جميع المسارات تكون مرئية.

تغلّف مكتبة Howler ملف الصوت في كائن howl، وقد أعطينا كائن howl القيمة null لأنّنا سنعطيه القيمة المناسبة عند إنشاء نسخة الصنف Vue. وللقيام بذلك، سنستخدم الخطاف created في دورة حياة الكائن Vue.

ستعين الشيفرة السابقة كائن Howl جديد لكل مسار في قائمة التشغيل.

والآن أنشئ المكوّن PlayerPlaylistPanel.vue وأضف الشيفرة التالية إليه:

أولاً، مررنا خاصية playlist من الملف Player.vue. بعدها، نتوجّه إلى كل مسار في القالب بواسطة الموجّه v-for ونعرض رقم المسار متبوعًا باسم الفنان وعنوان المسار إلى جانب المدة الزمنية في الجانب الأيمن. كذلك نستخدم القيد v-show على الخاصية display، وهكذا يكون المسار مرئيًا عندما تأخذ الخاصية display القيمة true فقط.

والآن سنستورد مكوّن قائمة التشغيل في ملف Player.vue ونسجّله ونضيفه إلى القالب. ثم نربط خاصية playlist بخاصية البيانات playlist كما يلي: <player-playlist-panel :playlist="playlist"></player-playlist-panel>

لنشاهد النتيجة في المتصفح:

The player playlist panel

كما ترى هنالك مشكلتان. الأولى هي أن أرقام المسارات ليست صحيحة، والثانية أن المدّة الزمنية لكل مسار ليست معروضة بالدقيقة. سنعمل على إصلاح هاتين المشكلتين عن طريق إنشاء مرشح تنسيق.

في ملف main.js أنشئ المرشح numbers والمرشح minutes، وسيكون بالإمكان الوصول إلى هذين المرشحين من أي مكان في التطبيق. بعدها، سنستخدم هذين المرشحين في ملف PlayerPlaylistPanel.vue بهذه الطريقة: {{ index | numbers }} و {{ track.howl.duration() | minutes }}.

والآن إن عدنا إلى التطبيق فسنرى أنّ كل شيء أصبح معروضًا بصورة صحيحة.

The player playlist panel with fixed numbers and minutes

جعل المسارات قابلة للتحديد

في ملف Player.vue ، أضف خاصية المسار selectedTrack: null خاصية البيانات selectedTrack: null واربطها بمكوِّن قائمة التشغيل ( :selectedTrack="selectedTrack" ). ثم نمرر الدعامة في ملف PlayerPlaylistPanel.vue ( selectTrackselectedTrack: Object ).

نحن أيضا إضافة وحدة إصغاء حدث انقر فوق إلى <v-list-tile-content @click="selectTrack(track)">ثم قم بإنشاء الأسلوب: selectTrack()>

الآن ، بالعودة إلى Player.vue ، أضف حدث selecttrack إلى مكون قائمة التشغيل ( @selecttrack="selectTrack" ) وقم بإنشاء طريقة selectTrack() :

الآن، إذا كنت اذهب إلى قائمة التشغيل، وانقر فوق مسار، سيتم تحديدها. ونحن لا نرى ذلك، ولكن يمكن أن نثبت أنه في ديفتولس فيو. في الصورة التالية، يتم تحديد المسار الثاني:

The player playlist with selected track shown in DevTools

الصف واختيار التصميم

الخطوة التالية جعل التحديد مرئية. الخطوة التالية هي جعل التحديد مرئيًا. للقيام بذلك ، سنقوم بربط الفصل الذي سيلون المسار المحدد باللون البرتقالي وفئة أخرى والتي ستجعل الصفوف أكثر قتامة لجعل المسارات أكثر تميزًا. ضع ما يلي بعد توجيه v-show :

سنقوم أيضا بإضافة فئة أخرى، والتي سيتم إظهار شريط تمرير عندما تحصل على القائمة كبيرة جداً.

ونحن إضافة الفئات الضرورية في نهاية الملف.

وهذا كل شيء. الآن، سلط الضوء على المسار المحدد في أورانج.

The player playlist with selected track colored

سنقوم بإضافة النقر المزدوج تؤدي وظيفة في نهاية المقطع التالي.

بناء عنصر التحكم لاعب

دعونا الآن بإنشاء عناصر تحكم اللاعب. سوف نبدأ باللعب ووقفه، وأزرار الإيقاف.

أضف أزرار Play و Pause و Stop

إنشاء مكون PlayerControlsBars.vue وإضافة هذا داخل:

هنا ، نستخدم مكون شريط الأدوات Vuetify.

هناك ثلاثة أزرار مع المسجلة انقر فوق الحدث المستمعين. دعونا إنشاء الأساليب لهم:

الآن ، في ملف Player.vue ، قم باستيراد وتسجيل وإضافة المكون في القالب. ثم ، سجل مستمعي الحدث ( @playtrack="play" ،@pausetrack="pause" ، @stoptrack="stop" ).

بعد ذلك ، أنشئ index: 0 خاصية بيانات ، والتي ستحتفظ بفهرس المسار الحالي. ثم ، قم بإنشاء محسوبcurrentTrack() :

والآن يمكننا البدء في إنشاء طرق play stop pause . سنبدأ باستخدام طريقة play() ، ولكن قبل ذلك نحتاج إلى إنشاء التشغيل خاصية بيانات playing: false ، والتي ستوضح ما إذا كان المسار يتم تشغيله أم لا. قم بإضافة التعليمة البرمجية التالية للأسلوبplay() :

تأخذ الطريقة فهرسًا كمعلمة ، تحدد المسار المطلوب تشغيله. أولاً ، نحصل على فهرس المسار المحدد. بعد ذلك ، نجري بعض عمليات التحقق لتحديد قيمة index . إذا كان يتم توفير فهرس كوسيطة، ورقم، ثم نستخدم ذلك. إذا تم تحديد مسار، ونحن استخدام الفهرس للمسار المحدد. إذا تم توفير فهرس كوسيطة وهو رقم ، فإننا نستخدمه. إذا تم تحديد مسار ، فإننا نستخدم فهرس المسار المحدد. إذا كان المسار المحدد مختلفًا عن المسار الحالي ، فنحن نستخدم الأسلوب stop() لإيقاف المسار الحالي. وأخيرًا ، إذا لم يتم تمرير وسيطة فهرس ولم يتم تحديد مسار ، فإننا نستخدم قيمة خاصية بيانات index .

بعد ذلك، نحصل على العواء (استناداً إلى قيمة فهرس) لتعقب والاختيار سواء كان يلعب. إذا، علينا أن نعود شيئا؛ إذا لم يكن كذلك، ونحن اللعب.

وأخيرًا ، نقوم بتحديث خاصية المسار selectedTrack ، playing وindex البيانات.

دعنا الآن إنشاء طرق pause() stop() .

وهنا، نحن فقط مؤقتاً أو إيقاف المسار الحالي وتحديث playing البيانات اللعب.

دعونا أيضا جعل مسار ابدأ اللعب على انقر نقراً مزدوجاً فوق.

إضافة @dblclick="playTrack()" أن <v-list-tile-content>في PlayerPlaylistPanel.vue وخلق أسلوب :cplayTrack()

تسجيل listener @playtrack="play" في الملف Player.vue و voila.

إضافة أزرار السابق والتالي

دعونا الآن إضافة أزرار السابق والتالي.

قم طريقة skipTrack() :

تسجيل مستمع الحدث ( @skiptrack="skip" ) في Player.vue .

وإنشاء أسلوب skip() :

نتحقق أولاً من الاتجاه next . إذا كان الأمر كذلك ، فإننا نزيد الفهرس بمقدار 1. وإذا كان المؤشر أكبر من المؤشر الأخير في المصفوفة ، فإننا نبدأ من الصفر مرة أخرى. عندما يكون الاتجاه prev ، نخفض المؤشر بمقدار 1. وإذا كان المؤشر أقل من الصفر ، فإننا نستخدم الفهرس الأخير. في النهاية ، نستخدم index كوسيطة skipTo() . يتوقف عن المسار الحالي ويلعب المقبل أو السابق.

هنا كيف ينظر اللاعب مع الأزرار:

The player play buttons

إضافة مربع تمرير حجم الصوت

إضافة ما يلي قبل كافة الأزرار:

هنا ، نستخدم مكون منزلق Vuetify.

إضافة volume: 0.5 بيانات الخاصية ، ثم قم بإنشاء أسلوب updateVolume() :

هنا، نحن نستخدم الكائن العواء العالمية لتعيين حجم الصوت على الصعيد العالمي لجميع صيحات.

نحتاج أيضًا إلى مزامنة وحدة تخزين Howler الأولية ، والتي يتم تعيينها افتراضيًا إلى 1 ، إلى خاصية volume . إذا لم تقم بذلك ، فسيظهر حجم الصوت 0.5 ولكن سيكون 1 في البداية. للقيام بذلك ، سنستخدم الخطاف الذي created مرة أخرى:

نريد أن نرى مستوى الصوت كنسبة مئوية على يمين شريط التمرير ، لذلك نضيف هذا في القالب: {{this.volume * 100 + '%'}}

إضافة زر لكتم الصوت

الآن، ونحن إضافة رمز وحدة تخزين قبل المنزلق.

سيتغير الرمز وفقًا لقيم volume والخصائص التي تم muted .

إضافة خاصية muted: false البيانات muted: false وإنشاء طريقة toggleMute() :

نستخدم كائن Howler العالمي مرة أخرى لضبط كتم الصوت عالميًا ، ثم muted القيمة التي تم تجاهلها.

في الصورة أدناه، يمكنك أن ترى كيف ينبغي أن ننظر مربع تمرير حجم الصوت:

The player volume slider

إضافة الزر تكرار

يضاف ما يلي بعد كل الأزرار:

إضافة loop: false خاصية في Player.vue ، ربط ذلك :loop="loop" وتمرير الدعامة ( loop: Boolean ) فيPlayerControlsBars.vue .

الآن ، لنقم بإنشاء طريقة toggleLoop() :

الآن ، مرة أخرى في Player.vue ، سجل مستمع الحدث ( @toggleloop="toggleLoop" ) وقم بإنشاء طريقة toggleLoop() :

عند هذه النقطة، نحن نواجه مشكلة صغيرة. عندما يسعى مسار النهاية، فإنه يتوقف فقط. لا ينتقل اللاعب إلى المسار التالي ولا هو تكرار المسار الحالي. في هذه المرحلة ، نواجه مشكلة صغيرة. عندما يسعى المسار إلى النهاية ، يتوقف الأمر. لا ينتقل اللاعب إلى المسار التالي ، ولا يعيد المسار الحالي.لإصلاح ذلك ، نحتاج إلى إضافة ما يلي إلى الدالة التي created بعد خاصية src :

الآن ، عند تشغيل loop ، سيتم تكرار المسار الحالي. إذا تم إيقاف تشغيله ، سينتقل اللاعب في المسار التالي.

إضافة زر تبديل

يضاف ما يلي بعد الزر تكرار:

إضافة shuffle: false خاصية في ، Player.vue ( :shuffle="shuffle" ) ، وتمرير الدعامة (النقل shuffle: Boolean ) في PlayerControlsBars.vue .

الآن ، لنقم بإنشاء طريقة toggleShuffle() ؛

الآن ، مرة أخرى في Player.vue ، سجل مستمع الحدث ( @toggleshuffle="toggleShuffle" ) وإنشاء طريقة toggleShuffle() :

الآن ، أضف ما يلي إلى الأسلوب skip() بعد index = 0 :

هنا كيف يجب أن يبدو التطبيق الخاص بك الآن:

The player repeat and shuffle buttons

أضف شريط Seek

أولاً ، في Player.vue ، قم بإنشاء seek: 0 property. ثم سنحتاج إلى مشاهدة موقع playing أجل تحديث البحث.

سيقوم هذا بتحديث قيمة التماس أربع مرات في الثانية الواحدة.

الآن ، إنشاء محسوب progress() :

ربطها ( :progress="progress" ) في القالب.

الآن ، في PlayerControlsBars.vue ، قم بتمرير دعامة progress ( progress: Number ) وأضف شريط أدوات آخر دون ذلك الذي قمنا بإنشائه بالفعل:

هنا ، نستخدم مكون التقدم Vuetify.

إنشاء trackProgress() المحسوبة ، والتي سوف تحصل على تقدم المسار كنسبة مئوية.

والآن ، قم بإنشاء أسلوب updateSeek() :

هنا ، نحصل على عنصر شريط التقدم ، الذي يستخدم فئة. .progress-linear__bar . لقد وجدت هذا مع DevTools المتصفح. بعد ذلك ، نحصل على موضع الماوس وعرض الشريط. ثم نحصل على موضع النقر بالماوس كنسبة مئوية.

العودة في Player.vue ، إضافة وتسجيل مستمع الحدث ( @updateseek="setSeek" ) وإنشاء طريقة setSeek() :

والازدهار! يمكنك استخدام الماوس لتغيير موضع المسار لعب.

بناء عنصر لوحة المعلومات

قم بإنشاء ملف PlayerInfoPanel.vue بالمحتوى التالي:

هنا ، نجتاز برنامج trackInfo ، والذي نستخدمه لملء معلومات المسار في المكون الخاص بنا.

الآن ، مرة أخرى في Player.vue ، استيراد وتسجيل وإضافة المكون في القالب.

ثم قم بإنشاء getTrackInfo() محسوبة:

بعد ذلك ، : في القالب ( :trackInfo="getTrackInfo" ) و voila. نحصل على بعض المعلومات الأساسية للمسار الذي تم تشغيله حاليًا ، كما يمكنك رؤيته في لقطة الشاشة أدناه.

The player info panel

بناء شريط البحث المكون

قم بإنشاء ملف PlayerSearchBar.vue بالمحتوى التالي:

نقوم بإنشاء حقل نصي وإضافة الدعامة clearable لإظهار رمز المقاصة عند كتابة شيء ما.

باستخدام v-model ، searchString ، وهي سلسلة فارغة مبدئيًا. ونحن نضيف مستمع حدث المدخلات.

نمر أيضًا على دعم playlist ، والذي نستخدمه في طريقة searchPlaylist() . في هذه الطريقة ، نستخدم خاصية display ونوقفoff لكل مسار لا يتطابق فيه العنوان أو الفنان مع سلسلة البحث ، ونحتفظ به onأو نوقفه لكل التطابقات. وأخيرًا ، إذا كانت سلسلة البحث فارغة أو مساويةnull ، والتي تحدث عند مسح الحقل باستخدام زر المسح ،on فإننا نفتح display لجميع المسارات.

الآن ، مرة أخرى في Player.vue ، استيراد وتسجيل وإضافة المكون في القالب.

اربط خاصية قائمة التشغيل ( :playlist="playlist" ) وتحقق من الوظيفة. هنا كيف يجب أن ننظر في العمل:

The player search bar test

بعض أفكار التحسين

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

  • دعم التشغيل متعددة
  • القدرة على إضافة أو إزالة المسارات من قائمة التشغيل
  • دعم السحب والإفلات
  • القدرة على فرز المسارات
  • التصور الصوت

الاستنتاج

في هذا البرنامج التعليمي، شاهدنا كيف سهلة وممتعة يمكن أن يكون لبناء تطبيق مع Vue.js ومع Vuetify.js خاصة. أرجو أن تتمتع بناء هذا اللاعب قدر ما فعلته. سأكون سعيداً لرؤية الخاص بك نسخة محسنة من اللاعب. حتى إذا قمت بإنشاء أحد، مجرد قطره ارتباط تجريبي في التعليقات!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.