إنشاء مشغل القرآن الكريم كامل لموقعك أو مدونتك

كيفية لإنشاء مشغل القرآن الكريم كامل لموقعك أو مدونتك

إنشاء مشغل القرآن الكريم متكامل لموقعك أو مدونتك

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

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

لماذا قد تحتاج إلى مشغل قرآن على موقعك؟

ماهي فوائد إضافة مشغل قرآن لموقعك

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

مقارنة بين الحلول الجاهزة والحل المخصص

المعيار	الحلول الجاهزة	المشغل المخصص
التكلفة	غالباً مدفوعة	مجاني
المرونة	محدودة	عالية جداً
التوافق	قد لا يعمل على جميع المنصات	يعمل على جميع المنصات
التخصيص	محدود	غير محدود
التحديثات	تحتاج لانتظار المطور	يمكنك التعديل فوراً

ماهي المتطلبات الأساسية لانشاء مشغل القرآن الكريم

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

معرفة تقنية أساسية: فهم بسيط لكيفية التعامل مع الأكواد البرمجية
مساحة إستضافة تدعم: HTML, CSS, JavaScript
إمكانية تعديل القوالب: إذا كنت تريد تضمين المشغل في مدونة
متصفح حديث: لاختبار المشغل أثناء التطوير

خطوات لإنشاء هيكل مشغل القرآن الكريم

يتكون مشغل القرآن الكريم من ثلاثة أجزاء رئيسية:

واجهة المستخدم (HTML): الهيكل الأساسي لعناصر المشغل
التنسيقات (CSS): التصميم والمظهر المرئي
الوظائف (JavaScript): العمليات المنطقية والتفاعلية

1. هيكل HTML الأساسي

<div id="quran-container">
  <!-- صورة شعار المشغل -->
  <img src="quran.png" alt="مشغل القرآن الكريم">
  
  <!-- اختيار القارئ -->
  <div class="reciter-selection">
    <label>القارئ:</label>
    <select id="reciterSelect">...</select>
  </div>
  
  <!-- مشغل الصوت -->
  <audio id="baPlayer" controls>
    <source id="audioSource" src="" type="audio/mpeg">
  </audio>
  
  <!-- خيارات التشغيل -->
  <div class="controls">
    <label>التشغيل التلقائي:</label>
    <input type="checkbox" id="autoplayCheckbox">
  </div>
  
  <!-- قائمة السور -->
  <div id="quran-playlist">...</div>
</div>

2. أنماط CSS للتنسيق

#quran-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background: #1b513c;
  border-radius: 10px;
  font-family: Arial, sans-serif;
}

.reciter-selection {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

#baPlayer {
  width: 100%;
  margin: 10px 0;
}

#quran-playlist {
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border-radius: 5px;
}

3. لوجيك JavaScript

// مصفوفة تحتوي على معلومات السور
const surahs = [
  {number: 1, name: "الفاتحة"},
  {number: 2, name: "البقرة"},
  // ... باقي السور
];

// دالة لتغيير السورة الحالية
function changeSurah(surahNumber) {
  // الكود المسؤول عن تغيير السورة
}

شرح تفصيلي لمكونات مشغل القرآن الكريم

نظام اختيار القارئ

يتميز مشغلنا بإمكانية اختيار بين عدة مقرئين مشهورين:

اسم القارئ	قيمة الخيار	جودة الصوت
المنشاوي	minsh	عالية
الحصري	hussary	متوسطة
العجمي	ajm	عالية
السديس	sds	عالية

كود التطبيق:

const reciters = {
  minsh: "محمد صديق المنشاوي",
  hussary: "محمود خليل الحصري",
  ajm: "أحمد العجمي",
  sds: "عبد الرحمن السديس"
};

نظام قائمة السور

تم تصميم قائمة السور لتكون:

مرتبة حسب المصحف
قابلة للتمرير
سهلة الاختيار
تظهر السورة الحالية بشكل مميز

مثال على كود إنشاء القائمة:

function createPlaylist() {
  const playlist = document.getElementById('quran-playlist');
  
  surahs.forEach(surah => {
    const item = document.createElement('div');
    item.className = 'surah-item';
    item.textContent = `${surah.number}. ${surah.name}`;
    item.onclick = () => playSurah(surah.number);
    playlist.appendChild(item);
  });
}

نظام التشغيل التلقائي

يوفر المشغل خيار التشغيل التلقائي الذي:

ينتقل تلقائياً للسورة التالية
يحفظ الإعدادات في ذاكرة المتصفح
يمكن تفعيله أو إلغاؤه بسهولة

كود إدارة التشغيل التلقائي:

// حفظ الإعدادات
autoplayCheckbox.addEventListener('change', function() {
  localStorage.setItem('quran_autoplay', this.checked);
});

// استعادة الإعدادات
window.addEventListener('load', function() {
  const autoplay = localStorage.getItem('quran_autoplay');
  if(autoplay) {
    document.getElementById('autoplayCheckbox').checked = autoplay === 'true';
  }
});

طريقة تثبيت كود القرآن الكريم

للمدونات (بلوجر، ووردبريس)

الدخول إلى لوحة التحكم
الذهاب إلى قسم القوالب
إضافة عنصر HTML/JavaScript جديد

لصق الكود التالي:

<!-- اكتب الوصف هنا -->
<div id="quran-container">
  <!-- محتوى المشغل -->
</div>

<style>
  /* أنماط CSS */
</style>

<script>
  // كود JavaScript
</script>

للمواقع العادية

فتح ملف HTML في محرر النصوص
إضافة الكود في المكان المناسب
حفظ الملف
رفعه للاستضافة

نصائح لتخصيص كود القرآن الكريم

تغيير الألوان الأساسية

يمكنك تعديل الألوان بسهولة عن طريق تغيير متغيرات CSS:

:root {
  --main-color: #1b513c; /* اللون الأخضر الإسلامي */
  --text-color: #ffffff; /* لون النص */
  --hover-color: #148f77; /* لون العناصر عند التمرير */
}

إضافة مقرئين جدد

لإضافة مقرئ جدد، اتبع الخطوات التالية:

أضف الخيار في قائمة <select>
تأكد من أن ملفات الصوت متوفرة على الخادم
عدل كود JavaScript ليدعم القارئ الجديد

مثال:

// إضافة قارئ جديد
reciters['maher'] = "ماهر المعيقلي";

تحسين أداء المشغل

لتحسين أداء المشغل:

استخدم تحميل الكسول للصور:

<img loading="lazy" src="quran.png" alt="قرآن">

خزن البيانات محلياً لتقليل الطلبات:

// تخزين قائمة السور
localStorage.setItem('surah_list', JSON.stringify(surahList));

كيفية إستكشاف الأخطاء وتصحيحها

المشاكل الشائعة وحلولها

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

هل كود مشغل القرآن الكريم موثوق المصدر؟

هل يمكن تغيير خادم إستضافة الملفات الصوتية؟

نعم، يمكنك تغيير الخادم عن طريق تعديل الأساس في كود JavaScript:

const baseUrl = "https://your-server.com/";

كيف أضيف ترجمة للقرآن؟

يمكنك إضافة طبقة جديدة للترجمة باستخدام:

function showTranslation(surahNumber) {
  // جلب الترجمة من API
}

هل يعمل المشغل على الهواتف؟

نعم، المشغل مصمم ليعمل على:

أجهزة سطح المكتب
الأجهزة اللوحية
الهواتف الذكية

معينة كود مشغل القرآن الكريم

يمكنك الإستماع إلى القرآن الكريم كاملا

قرآن كريم Holy Quran

القارئ

التشغيل التلقائي

https://server10.mp3quran.net/minsh/001.mp3الفاتحة

https://server10.mp3quran.net/minsh/002.mp3البقرة

https://server10.mp3quran.net/minsh/003.mp3آل عمران

https://server10.mp3quran.net/minsh/004.mp3النساء

https://server10.mp3quran.net/minsh/005.mp3المائدة

https://server10.mp3quran.net/minsh/006.mp3الأنعام

https://server10.mp3quran.net/minsh/007.mp3الأعراف

https://server10.mp3quran.net/minsh/008.mp3الأنفال

https://server10.mp3quran.net/minsh/009.mp3التوبة

https://server10.mp3quran.net/minsh/010.mp3يونس

https://server10.mp3quran.net/minsh/011.mp3هود

https://server10.mp3quran.net/minsh/012.mp3يوسف

https://server10.mp3quran.net/minsh/013.mp3الرعد

https://server10.mp3quran.net/minsh/014.mp3إبراهيم

https://server10.mp3quran.net/minsh/015.mp3الحجر

https://server10.mp3quran.net/minsh/016.mp3النحل

https://server10.mp3quran.net/minsh/017.mp3الإسراء

https://server10.mp3quran.net/minsh/018.mp3الكهف

https://server10.mp3quran.net/minsh/019.mp3مريم

https://server10.mp3quran.net/minsh/020.mp3طه

https://server10.mp3quran.net/minsh/021.mp3الأنبياء

https://server10.mp3quran.net/minsh/022.mp3الحج

https://server10.mp3quran.net/minsh/023.mp3المؤمنون

https://server10.mp3quran.net/minsh/024.mp3النور

https://server10.mp3quran.net/minsh/025.mp3الفرقان

https://server10.mp3quran.net/minsh/026.mp3الشعراء

https://server10.mp3quran.net/minsh/027.mp3النمل

https://server10.mp3quran.net/minsh/028.mp3القصص

https://server10.mp3quran.net/minsh/029.mp3العنكبوت

https://server10.mp3quran.net/minsh/030.mp3الروم

https://server10.mp3quran.net/minsh/031.mp3لقمان

https://server10.mp3quran.net/minsh/032.mp3السجدة

https://server10.mp3quran.net/minsh/033.mp3الأحزاب

https://server10.mp3quran.net/minsh/034.mp3سبأ

https://server10.mp3quran.net/minsh/035.mp3فاطر

https://server10.mp3quran.net/minsh/036.mp3يس

https://server10.mp3quran.net/minsh/037.mp3الصافات

https://server10.mp3quran.net/minsh/038.mp3ص

https://server10.mp3quran.net/minsh/039.mp3الزمر

https://server10.mp3quran.net/minsh/040.mp3غافر

https://server10.mp3quran.net/minsh/041.mp3فصلت

https://server10.mp3quran.net/minsh/042.mp3الشورى

https://server10.mp3quran.net/minsh/043.mp3الزخرف

https://server10.mp3quran.net/minsh/044.mp3الدخان

https://server10.mp3quran.net/minsh/045.mp3الجاثية

https://server10.mp3quran.net/minsh/046.mp3الأحقاف

https://server10.mp3quran.net/minsh/047.mp3محمد

https://server10.mp3quran.net/minsh/048.mp3الفتح

https://server10.mp3quran.net/minsh/049.mp3الحجرات

https://server10.mp3quran.net/minsh/050.mp3ق

https://server10.mp3quran.net/minsh/051.mp3الذاريات

https://server10.mp3quran.net/minsh/052.mp3الطور

https://server10.mp3quran.net/minsh/053.mp3النجم

https://server10.mp3quran.net/minsh/054.mp3القمر

https://server10.mp3quran.net/minsh/055.mp3الرحمن

https://server10.mp3quran.net/minsh/056.mp3الواقعة

https://server10.mp3quran.net/minsh/057.mp3الحديد

https://server10.mp3quran.net/minsh/058.mp3المجادلة

https://server10.mp3quran.net/minsh/059.mp3الحشر

https://server10.mp3quran.net/minsh/060.mp3الممتحنة

https://server10.mp3quran.net/minsh/061.mp3الصف

https://server10.mp3quran.net/minsh/062.mp3الجمعة

https://server10.mp3quran.net/minsh/063.mp3المنافقون

https://server10.mp3quran.net/minsh/064.mp3التغابن

https://server10.mp3quran.net/minsh/065.mp3الطلاق

https://server10.mp3quran.net/minsh/066.mp3التحريم

https://server10.mp3quran.net/minsh/067.mp3الملك

https://server10.mp3quran.net/minsh/068.mp3القلم

https://server10.mp3quran.net/minsh/069.mp3الحاقة

https://server10.mp3quran.net/minsh/070.mp3المعارج

https://server10.mp3quran.net/minsh/071.mp3نوح

https://server10.mp3quran.net/minsh/072.mp3الجن

https://server10.mp3quran.net/minsh/073.mp3المزمل

https://server10.mp3quran.net/minsh/074.mp3المدثر

https://server10.mp3quran.net/minsh/075.mp3القيامة

https://server10.mp3quran.net/minsh/076.mp3الإنسان

https://server10.mp3quran.net/minsh/077.mp3المرسلات

https://server10.mp3quran.net/minsh/078.mp3النبأ

https://server10.mp3quran.net/minsh/079.mp3النازعات

https://server10.mp3quran.net/minsh/080.mp3عبس

https://server10.mp3quran.net/minsh/081.mp3التكوير

https://server10.mp3quran.net/minsh/082.mp3الانفطار

https://server10.mp3quran.net/minsh/083.mp3المطففين

https://server10.mp3quran.net/minsh/084.mp3الانشقاق

https://server10.mp3quran.net/minsh/085.mp3البروج

https://server10.mp3quran.net/minsh/086.mp3الطارق

https://server10.mp3quran.net/minsh/087.mp3الأعلى

https://server10.mp3quran.net/minsh/088.mp3الغاشية

https://server10.mp3quran.net/minsh/089.mp3الفجر

https://server10.mp3quran.net/minsh/090.mp3البلد

https://server10.mp3quran.net/minsh/091.mp3الشمس

https://server10.mp3quran.net/minsh/092.mp3الليل

https://server10.mp3quran.net/minsh/093.mp3الضحى

https://server10.mp3quran.net/minsh/094.mp3الشرح

https://server10.mp3quran.net/minsh/095.mp3التين

https://server10.mp3quran.net/minsh/096.mp3العلق

https://server10.mp3quran.net/minsh/097.mp3القدر

https://server10.mp3quran.net/minsh/098.mp3البينة

https://server10.mp3quran.net/minsh/099.mp3الزلزلة

https://server10.mp3quran.net/minsh/100.mp3العاديات

https://server10.mp3quran.net/minsh/101.mp3القارعة

https://server10.mp3quran.net/minsh/102.mp3التكاثر

https://server10.mp3quran.net/minsh/103.mp3العصر

https://server10.mp3quran.net/minsh/104.mp3الهمزة

https://server10.mp3quran.net/minsh/105.mp3الفيل

https://server10.mp3quran.net/minsh/106.mp3قريش

https://server10.mp3quran.net/minsh/107.mp3الماعون

https://server10.mp3quran.net/minsh/108.mp3الكوثر

https://server10.mp3quran.net/minsh/109.mp3الكافرون

https://server10.mp3quran.net/minsh/110.mp3النصر

https://server10.mp3quran.net/minsh/111.mp3المسد

https://server10.mp3quran.net/minsh/112.mp3الإخلاص

https://server10.mp3quran.net/minsh/113.mp3الفلق

https://server10.mp3quran.net/minsh/114.mp3الناس

واجهة مستخدم سهلة وبسيطة
دعم للعديد من المقرئين
خيارات تشغيل متعددة
قابلية كبيرة للتخصيص

توصيات للاستخدام الأمثل

لتحقيق أفضل نتائج، أنصح بما يلي:

اختبار المشغل على أجهزة متعددة قبل النشر
تحديث قائمة المقرئين دورياً
الاستماع لملاحظات الزوار لتحسين المشغل

موارد إضافية

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

مواضيع جديدة

إكتشف Cursor AI لبرمجة أسرع وأكثر ذكاءً

ما هي المجالات المربحة من الذكاء الاصطناعي؟

إكتشف Deepseek Coder الذي يكتب الكود بنفسه

إستخدام أدوات تغيير النصوص وتحسين الجودة باستخدام CSS

هل قرأت كتاب مرجع الإمتحان AZ-900 أساسيات Microsoft Azure