تطبيق ويب تقدمي (PWA) لتشغيل وإدارة الموسيقى مصمم خصيصاً للمستخدمين العرب، مبني باستخدام Vue.js ومستوحى من تصميم Spotify.
- ✅ رفع ملفات MP3 من جهازك
- ✅ إنشاء قوائم تشغيل متعددة
- ✅ تنظيم الأغاني حسب القوائم
- ✅ حذف وإدارة الأغاني
- ✅ 🔍 بحث فوري في الأغاني والفنانين
- ✅ تشغيل/إيقاف مؤقت
- ✅ التنقل بين الأغاني (السابق/التالي)
- ✅ التحكم في مستوى الصوت
- ✅ شريط التقدم التفاعلي
- ✅ دعم Media Session API للتحكم من إشعارات النظام
- ✅ عرض معلومات الأغنية في الإشعارات
- ✅ 🔀 وضع التشغيل العشوائي (Shuffle)
- ✅ 🔁 أوضاع التكرار (إيقاف/الكل/واحد)
- ✅ 📋 قائمة الانتظار - عرض الأغاني القادمة
- ✅ ⌨️ اختصارات لوحة المفاتيح - 11+ اختصار
- ✅ حفظ الأغاني باستخدام IndexedDB
- ✅ عمل التطبيق بدون اتصال بالإنترنت
- ✅ تخزين القوائم والتفضيلات محلياً
- ✅ قابل للتثبيت على سطح المكتب والموبايل
- ✅ يعمل بدون اتصال (Offline Support)
- ✅ تحديثات تلقائية
- ✅ أداء سريع وسلس
- ✅ تصميم متجاوب (Responsive Design)
- ✅ اللغة العربية افتراضياً
- ✅ دعم الكتابة من اليمين لليسار (RTL)
- ✅ خط Cairo الاحترافي
- ✅ تجربة مستخدم محلية
- Node.js (الإصدار 16 أو أحدث)
- npm أو yarn
- تثبيت المكتبات:
npm install- تشغيل الخادم المحلي:
npm run dev- فتح التطبيق:
افتح المتصفح على
http://localhost:5173
npm run buildالملفات الجاهزة ستكون في مجلد dist/
npm run previewarabic-music-pwa/
├── public/ # الملفات الثابتة والأيقونات
├── src/
│ ├── App.vue # المكون الرئيسي
│ ├── main.js # نقطة الدخول
│ ├── db.js # إعدادات IndexedDB
│ └── style.css # التنسيقات
├── index.html # HTML الرئيسي
├── vite.config.js # إعدادات Vite وPWA
└── package.json # المكتبات والاعتمادات
| التقنية | الاستخدام |
|---|---|
| Vue.js 3 | إطار العمل الأساسي |
| Vite | أداة البناء والتطوير |
| Dexie.js | إدارة IndexedDB |
| Workbox | Service Worker وCache |
| vite-plugin-pwa | دعم PWA |
| Media Session API | التحكم في الوسائط |
| Cairo Font | الخط العربي |
- افتح التطبيق في المتصفح
- اضغط على أيقونة التثبيت في شريط العنوان
- أو: القائمة ← تثبيت التطبيق
- افتح التطبيق في المتصفح
- القائمة ← "إضافة إلى الشاشة الرئيسية"
- أو استخدم خيار "تثبيت التطبيق"
- اضغط على زر "رفع ملفات"
- اختر ملفات MP3 من جهازك
- أو اسحب الملفات وأفلتها في النافذة
- اضغط على زر ➕ في قائمة "قوائم التشغيل"
- أدخل اسم القائمة
- ابدأ بإضافة الأغاني
- اختر قائمة تشغيل من القائمة الجانبية
- اضغط على أي أغنية لتشغيلها
- استخدم أزرار التحكم في الأسفل
- 🔍 البحث: اكتب في صندوق البحث أعلى القائمة
- 🔀 Shuffle: اضغط زر التشغيل العشوائي أو
Ctrl+S - 🔁 Repeat: اضغط زر التكرار أو
Ctrl+R - 📋 Queue: اضغط زر القائمة أو
Ctrl+Q
Space- تشغيل/إيقاف→/←- تقديم/ترجيع 5 ثوان↑/↓- رفع/خفض الصوتCtrl+N/P- التالي/السابقCtrl+S/R/Q- Shuffle/Repeat/Queue
- ✅ جميع الملفات محلية: الأغاني تُحفظ في متصفحك فقط
- ✅ لا توجد خوادم خارجية: لا يتم رفع أي بيانات
- ✅ خصوصية كاملة: موسيقاك تبقى لك فقط
- ✅ بدون تتبع: لا توجد أدوات تحليلات أو تتبع
- ✅ مفتوح المصدر: الكود متاح للمراجعة
- المعادل الصوتي (Equalizer)
- استيراد/تصدير القوائم
- السمات المتعددة (Themes)
- تعديل معلومات الأغاني (Metadata)
- قوائم التشغيل الذكية
- إحصائيات الاستماع
المساهمات مرحب بها! يمكنك:
- 🐛 الإبلاغ عن مشاكل
- 💡 اقتراح مميزات جديدة
- 🔧 إصلاح الأخطاء
- 📖 تحسين التوثيق
هذا المشروع مفتوح المصدر تحت رخصة MIT
- تصميم مستوحى من Spotify
- خط Cairo من Google Fonts
- مكتبة Dexie.js لإدارة IndexedDB
- مكتبة Workbox من Google
إذا واجهت أي مشاكل أو لديك استفسارات:
- افتح Issue في المشروع
- راجع التوثيق
- تحقق من متطلبات المتصفح
| المتصفح | الدعم |
|---|---|
| Chrome | ✅ كامل |
| Edge | ✅ كامل |
| Firefox | ✅ كامل |
| Safari | ✅ كامل |
| Opera | ✅ كامل |
صُنع بـ ❤️ للمستخدمين العرب