سكريبت كود للإستماع او قراءة القرآن الكريم

القرآن الكريم (Quran karim)

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

مكونات السكريبت القرآن الكريم

1. واجهة المستخدم HTML

أولاً، سنقوم بتصميم واجهة المستخدم باستخدام HTML:

<div id="quran-container">
  <h1 dir="rtl" style="text-align: center;">القرآن الكريم (Quran karim)</h1>
  <select id="surahSelect"></select>
  <button id="playButton">استماع للسورة</button>
  <div id="quranText"></div>
  <audio id="audioPlayer" controls style="display: none;"></audio>
</div>

2. كود JavaScript لجلب البيانات

نستخدم JavaScript لجلب بيانات السور والآيات من API، وعرضها وتشغيل تلاوتها عند الطلب.

جلب قائمة السور من API

async function fetchSurahs() {
  const response = await fetch('https://api.alquran.cloud/v1/surah');
  const data = await response.json();
  return data.data;
}

جلب الآيات من API

async function fetchAyahs(surahNumber) {
  const response = await fetch(`https://api.alquran.cloud/v1/surah/${surahNumber}/ar.alafasy`);
  const data = await response.json();
  return data.data.ayahs;
}

ملء القائمة بالسور

async function populateSurahSelect() {
  const surahs = await fetchSurahs();
  const surahSelect = document.getElementById('surahSelect');

  surahs.forEach(surah => {
    const option = document.createElement('option');
    option.value = surah.number;
    option.textContent = surah.englishName + ' - ' + surah.name;
    surahSelect.appendChild(option);
  });

  displaySurahText(surahs[0].number);
}

عرض آيات السورة

async function displaySurahText(surahNumber) {
  const ayahs = await fetchAyahs(surahNumber);
  const quranText = document.getElementById('quranText');
  quranText.innerHTML = '';

  ayahs.forEach(ayah => {
    const ayahElement = document.createElement('p');
    ayahElement.textContent = `${ayah.numberInSurah}. ${ayah.text}`;
    quranText.appendChild(ayahElement);
  });
}

تشغيل تلاوة السورة

async function playSurahAudio(surahNumber) {
  const response = await fetch(`https://api.alquran.cloud/v1/surah/${surahNumber}/ar.alafasy`);
  const data = await response.json();
  const audioUrl = data.data.ayahs[0].audio;
  const audioPlayer = document.getElementById('audioPlayer');
  audioPlayer.src = audioUrl;
  audioPlayer.style.display = 'block';
  audioPlayer.play();
}

3. إضافة الأحداث لتحديث المحتوى

تغيير السورة عند اختيار سورة جديدة

document.getElementById('surahSelect').addEventListener('change', function() {
  const selectedSurah = this.value;
  displaySurahText(selectedSurah);
});

زر الاستماع لتشغيل التلاوة الصوتية

document.getElementById('playButton').addEventListener('click', function() {
  const selectedSurah = document.getElementById('surahSelect').value;
  playSurahAudio(selectedSurah);
});

4. تنسيق الواجهة باستخدام CSS

لجعل الواجهة جذابة، نستخدم CSS لتنسيق المكونات:

#quran-container {
  text-align: right;
  direction: rtl;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#surahSelect, #playButton {
  font-size: 18px;
  margin-bottom: 20px;
}

#playButton {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#playButton:hover {
  background-color: #45a049;
}

#quranText {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
}

#audioPlayer {
  width: 100%;
  margin-top: 20px;
}

خاتمة

بفضل هذا السكريبت، يمكن للمستخدمين قراءة السور القرآنية والاستماع لتلاوتها بكل سهولة، مما يجعله مفيدًا لتطبيقات ومواقع إسلامية تهدف إلى تقديم محتوى القرآن الكريم.