كتاب (1/10) مشغل سور القران الكريم لأكثر من 200 قارئ

[م/عامر]

مشغل القرآن الكريم: استماع وتحميل مباشر مع مزايا متقدمة​

السلام عليكم ورحمة الله وبركاته،

هذه هي الأداة أو الصفحة الأولى من ضمن 10 صفحات مميزة من مشروع نور لقراءة وتدبر القرآن الكريم

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


تحتوي المكتبة على 211 قارئ
باجمالي 277 مصحف مختلف

ولا زالت في توسع

أبرز مميزات المشغل​

يحتوي المشغل على مجموعة من الخصائص التي تجعل تجربة الاستماع أكثر مرونة وتخصيصًا:

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

---

لوحة تحكم متقدمة لتجربة فريدة​

إلى جانب الميزات الأساسية، يوفر المشغل أدوات تحكم إضافية لتحسين تجربة الاستماع:

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

---

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

للمعاينة المباشرة

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

للتحميل

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

 

[hatem-ghouthi]

بارك الله فيك .
فقط لو تعمل صفحة خاصة بيك على github
تنشر فيها السكربتات و منها ايضا يمكن تجربة السكربتات مباشرة

 

[م/عامر]

بارك الله فيك .
فقط لو تعمل صفحة خاصة بيك على github
تنشر فيها السكربتات و منها ايضا يمكن تجربة السكربتات مباشرة

جزاك الله خيرا

تم اضافة السكربت كصفحة جاهزة


ألف شكر على النصيحة

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

 

[Sayed Abu Makka]

بسم الله ماشاء الله عليك يامهندس م/عامر ايه الجمال ده ربنا يجعله فى ميزان حسناتك يارب

 

[ahmad mahamid]

جعله الله بميزان حسناتك @م/عامر

قمت بعمل بعض التعديلات يمكنك اخذها بعين الاعتبار

تم عمل بعض التحسينات على كود JavaScript واختصار 127 سطر من الكود الاصلي​

​

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

​

• إدارة الحالة المركزية (Centralized State): بدلاً من تعريف عشرات المتغيرات العامة لتتبع (القارئ الحالي، السورة الحالية، حالة التشغيل، وضع التكرار، إلخ)، تم جمعها كلها في كائن واحد مركزي (appState).​

  ​

  • الفائدة: هذا ينشئ "مصدر حقيقة واحد" (Single Source of Truth). أصبحت عملية تتبع وتغيير حالة التطبيق منظمة جداً، مما يقضي على فئة كاملة من الأخطاء المنطقية الصعبة.​

​

​

2. الأداء والسرعة (Performance & Speed)​

​

​

• التحميل المتوازي للبيانات (Parallel Loading): سابقاً، كان التطبيق ينتظر تحميل قائمة القراء، وعند انتهائها، يبدأ في تحميل قائمة السور (نمط "الشلال"). الآن، يتم طلب القائمتين في نفس الوقت وعلى التوازي.​

  ​

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

• التخزين المؤقت للـ API (API Caching): قوائم القراء وأسماء السور لا تتغير كثيراً. لذلك، عند تحميلها لأول مرة، يتم تخزينها مؤقتاً في الذاكرة المحلية للمتصفح (localStorage) مع طابع زمني (لمدة 24 ساعة).​

  ​

  • الفائدة: عند عودة المستخدم للتطبيق، يتم تحميل البيانات فوراً من الذاكرة المؤقتة دون الحاجة لأي اتصال بالإنترنت، مما يجعل التطبيق يفتح بشكل لحظي.​

• تحسين أداء البحث (Search Optimization): سابقاً، كانت عملية البحث عن سورة تقوم بالمرور على جميع عناصر القائمة المنسدلة (DOM) وإخفاء وإظهار كل عنصر، وهي عملية بطيئة جداً على المتصفح. الآن، تتم عملية البحث على مصفوفة البيانات في الذاكرة (وهي سريعة جداً)، ثم يتم إعادة بناء القائمة المنسدلة مرة واحدة فقط بالنتائج المطابقة.​

  ​

  • الفائدة: بحث فوري وسلس، حتى على الأجهزة البطيئة.​

​

تجربة المستخدم وإمكانية الوصول (UX & Accessibility)​

​

​

• دعم إمكانية الوصول (Accessibility): تم إجراء تحسينات كبيرة لجعل التطبيق قابلاً للاستخدام من قبل ذوي الاحتياجات الخاصة الذين يستخدمون قارئات الشاشة (Screen Readers).​

  ​

  • تم إضافة وسوم aria-label, role, و aria-expanded لجميع الأزرار، والقوائم، ومدخلات التحكم.​

  • الفائدة: يمكن الآن للمستخدمين المكفوفين التنقل في التطبيق وفهم وظيفة كل زر (مثل "تشغيل"، "تبديل الوضع الداكن"، "اختيار قارئ") بشكل كامل.​

• تحسينات واجهة المستخدم (UI Enhancements):​

  ​

  • تم ربط التحكم بالصوت والسرعة عبر لوحة المفاتيح بشكل صحيح ليقوم بتحديث الواجهة (شريط التمرير والرقم) بشكل فوري.​

  • تم تحسين آلية تحديث أيقونة "القارئ المفضل" لتكون أكثر دقة.​

 

[م/عامر]

جعله الله بميزان حسناتك @م/عامر​

​

قمت بعمل بعض التعديلات يمكنك اخذها بعين الاعتبار​

​

تم عمل بعض التحسينات على كود JavaScript واختصار 127 سطر من الكود الاصلي​

​

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

​

​

• إدارة الحالة المركزية (Centralized State): بدلاً من تعريف عشرات المتغيرات العامة لتتبع (القارئ الحالي، السورة الحالية، حالة التشغيل، وضع التكرار، إلخ)، تم جمعها كلها في كائن واحد مركزي (appState).​

  ​

  • الفائدة: هذا ينشئ "مصدر حقيقة واحد" (Single Source of Truth). أصبحت عملية تتبع وتغيير حالة التطبيق منظمة جداً، مما يقضي على فئة كاملة من الأخطاء المنطقية الصعبة.​

​

​

2. الأداء والسرعة (Performance & Speed)​

​

​

• التحميل المتوازي للبيانات (Parallel Loading): سابقاً، كان التطبيق ينتظر تحميل قائمة القراء، وعند انتهائها، يبدأ في تحميل قائمة السور (نمط "الشلال"). الآن، يتم طلب القائمتين في نفس الوقت وعلى التوازي.​

  ​

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

• التخزين المؤقت للـ API (API Caching): قوائم القراء وأسماء السور لا تتغير كثيراً. لذلك، عند تحميلها لأول مرة، يتم تخزينها مؤقتاً في الذاكرة المحلية للمتصفح (localStorage) مع طابع زمني (لمدة 24 ساعة).​

  ​

  • الفائدة: عند عودة المستخدم للتطبيق، يتم تحميل البيانات فوراً من الذاكرة المؤقتة دون الحاجة لأي اتصال بالإنترنت، مما يجعل التطبيق يفتح بشكل لحظي.​

• تحسين أداء البحث (Search Optimization): سابقاً، كانت عملية البحث عن سورة تقوم بالمرور على جميع عناصر القائمة المنسدلة (DOM) وإخفاء وإظهار كل عنصر، وهي عملية بطيئة جداً على المتصفح. الآن، تتم عملية البحث على مصفوفة البيانات في الذاكرة (وهي سريعة جداً)، ثم يتم إعادة بناء القائمة المنسدلة مرة واحدة فقط بالنتائج المطابقة.​

  ​

  • الفائدة: بحث فوري وسلس، حتى على الأجهزة البطيئة.​

​

تجربة المستخدم وإمكانية الوصول (UX & Accessibility)​

​

​

• دعم إمكانية الوصول (Accessibility): تم إجراء تحسينات كبيرة لجعل التطبيق قابلاً للاستخدام من قبل ذوي الاحتياجات الخاصة الذين يستخدمون قارئات الشاشة (Screen Readers).​

  ​

  • تم إضافة وسوم aria-label, role, و aria-expanded لجميع الأزرار، والقوائم، ومدخلات التحكم.​

  • الفائدة: يمكن الآن للمستخدمين المكفوفين التنقل في التطبيق وفهم وظيفة كل زر (مثل "تشغيل"، "تبديل الوضع الداكن"، "اختيار قارئ") بشكل كامل.​

• تحسينات واجهة المستخدم (UI Enhancements):​

  ​

  • تم ربط التحكم بالصوت والسرعة عبر لوحة المفاتيح بشكل صحيح ليقوم بتحديث الواجهة (شريط التمرير والرقم) بشكل فوري.​

  • تم تحسين آلية تحديث أيقونة "القارئ المفضل" لتكون أكثر دقة.​

شكرا أخي

ahmad mahamid​

فعلا تحسينات للأفضل جزيت خيرا

 

[م/عامر]

بسم الله ماشاء الله عليك يامهندس م/عامر ايه الجمال ده ربنا يجعله فى ميزان حسناتك يارب

ربنا يبارك فيك ويحفظك، ويزيدك من فضله وعطائه.

نسأله أن يتقبل منا جميعاً صالح الأعمال،

ويجعله خالصاً لوجهه الكريم.

شكراً جزيلاً لك، وتقبل تحياتي

 

[alranteesi]

بارك الله فيكم وجزاكم الله خيرا أخي عامر والاخ احمد على هذا الطرح
جعله الله في ميزان حسناتكم