عن المشروع
Omi Piano هو تطبيق بيانو ويب مبني باستخدام إطار Omi ومقتطفات Omi Snippets. يجمع بين 7 مفاتيح أرقام و5 مفاتيح أحرف وأربعة مفاتيح وظيفية هي Shift وControl وOption وCommand في لوحة المفاتيح لإنتاج 60 نغمة بيانو مفردة (35 نغمة كاملة و25 نصف نغمة)، تغطي مدى صوتيًا من الجهير المضاعف إلى الحاد المضاعف.
يوفر المشروع عملية تطوير وتثبيت كاملة، حيث يمكن تثبيت حزمة omi-piano عبر npm، أو استنساخ المستودع ثم تشغيل npm start للتشغيل محليًا. تستخدم الواجهة تخطيط flex وظلال CSS لرسم مفاتيح البيانو البيضاء والسوداء، ويمكن النقر على المفاتيح أو الضغط على مفاتيح لوحة المفاتيح المقابلة لتشغيل النغمات، مع حركة تمييز للمفاتيح المضغوطة.
يتضمن التطبيق مقطوعتين مدمجتين هما "وعد الهندباء" و"القمر يعبّر عن قلبي"، ويدعم التشغيل التلقائي. يتحكم منطق التشغيل التلقائي في فترات التوقف بين النغمات من خلال التكرار وPromise، مع تمييز عرض النغمات السفلية بشكل متزامن أثناء التشغيل. يقدم المشروع أيضًا علاقة التطابق بين التدوين الموسيقي المبسط ومفاتيح لوحة المفاتيح، وكيفية كتابة مقطوعات مخصصة.
من الناحية التقنية، لا يستخدم المشروع أطر عمل رئيسية مثل React أو Vue أو Angular، بل يعتمد حل JSX وWeb Components الخاص بـ Omi، مع محمل المكونات أحادية الملف Omil وآلية اتصال المكونات القائمة على Proxy. يعتمد تشغيل الصوت على وسم audio في HTML5، حيث يتم الحصول على العقد عبر ref والتحكم في تقدم التشغيل.
هذا المشروع مناسب للمطورين المهتمين بتقسيم مكونات الواجهة الأمامية ومعالجة أحداث لوحة المفاتيح وتشغيل الصوت للتعلم والمراجعة، كما يناسب عشاق الموسيقى كأداة بيانو ويب بسيطة.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.