Konu sahibine teşekkürler ufak bir değişiklik yaparak sadece Yasin suresi değil Hatim şeklinde paylaşıyorum. Ben çok beğendim sade ve güzel, ellerine sağlık
@kozmikkreatif;
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kuran-ı Kerim Sureleri</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.card-arabic {
background-color: #f9f9f9;
}
.card-text-arabic {
font-size: 1.2em;
direction: rtl;
}
.card-text-translation {
font-size: 1em;
}
.highlight {
background-color: #d4edda;
}
audio {
width: 100%;
margin-top: 10px;
}
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
z-index: 1000;
}
#ayah-loading {
display: none;
font-size: 18px;
color: #333;
text-align: center;
}
</style>
</head>
<body>
<div id="loading">Sure Listesi Yükleniyor...</div>
<div class="container mt-5" style="display:none;" id="surah-content">
<h1 class="text-center mb-4">Kuran-ı Kerim</h1>
<div class="form-group">
<label for="surah-select">Sure Seçin:</label>
<select class="form-control" id="surah-select">
<option value="" selected disabled>Sure Seçin</option>
</select>
</div>
<div id="ayah-loading">Ayetler ve Sesler Yükleniyor...</div>
<div class="row" id="surah-container"></div>
<audio id="audioPlayer" controls style="width: 100%; margin-top: 20px;">
<source id="audioSource" src="" type="audio/mpeg">
Tarayıcınız audio elementini desteklemiyor.
</audio>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const surahSelect = document.getElementById('surah-select');
const surahContainer = document.getElementById('surah-container');
const audioPlayer = document.getElementById('audioPlayer');
const audioSource = document.getElementById('audioSource');
const surahContent = document.getElementById('surah-content');
const loadingScreen = document.getElementById('loading');
const ayahLoading = document.getElementById('ayah-loading');
let audioPreloaded = [];
let currentAyah = 1;
let totalAyahs = 0;
// Tüm surelerin listesini al
fetch('http://api.alquran.cloud/v1/surah')
.then(response => response.json())
.then(data => {
if (data.status === 'OK') {
data.data.forEach(surah => {
const option = document.createElement('option');
option.value = surah.number;
option.textContent = `${surah.number}. ${surah.englishName}`;
surahSelect.appendChild(option);
});
loadingScreen.style.display = 'none';
surahContent.style.display = 'block';
}
});
// Sure seçimi değiştiğinde çalışacak fonksiyon
surahSelect.addEventListener('change', function() {
const surahNumber = surahSelect.value;
if (surahNumber) {
fetchSurahData(surahNumber);
}
});
function fetchSurahData(surahNumber) {
ayahLoading.style.display = 'block';
surahContainer.innerHTML = '';
audioPreloaded = [];
currentAyah = 1;
// API'den sure verilerini al
const urlArabic = `http://api.alquran.cloud/v1/surah/${surahNumber}`; // Arabic text
const urlTranslation = `http://api.alquran.cloud/v1/surah/${surahNumber}/tr.diyanet`; // Diyanet translation
const urlAudio = `http://api.alquran.cloud/v1/surah/${surahNumber}/ar.alafasy`; // Audio recitation by Alafasy
Promise.all([
fetch(urlArabic).then(response => response.json()),
fetch(urlTranslation).then(response => response.json()),
fetch(urlAudio).then(response => response.json())
]).then(data => {
const [dataArabic, dataTranslation, dataAudio] = data;
if (dataArabic.status === 'OK' && dataTranslation.status === 'OK' && dataAudio.status === 'OK') {
const surahArabic = dataArabic.data;
const surahTranslation = dataTranslation.data;
const surahAudio = dataAudio.data.ayahs;
totalAyahs = surahArabic.ayahs.length;
// Ayetleri ve mealini göster
surahArabic.ayahs.forEach((ayah, index) => {
const arabicText = ayah.text;
const translation = surahTranslation.ayahs[index].text;
const audioUrl = surahAudio[index].audio;
const ayahCard = document.createElement('div');
ayahCard.classList.add('col-md-12', 'mb-4', 'ayah-card');
ayahCard.id = `ayah-${ayah.numberInSurah}`;
ayahCard.innerHTML = `
<div class="card card-arabic">
<div class="card-body">
<h5 class="card-title text-center">Ayet ${ayah.numberInSurah}</h5>
<p class="card-text card-text-arabic text-center">${arabicText}</p>
</div>
</div>
<div class="card mt-2">
<div class="card-body">
<p class="card-text card-text-translation"><strong>Meali (DIB):</strong> ${translation}</p>
</div>
</div>
`;
surahContainer.appendChild(ayahCard);
});
preloadAudio(surahAudio);
} else {
alert('Sure verileri alınamadı.');
}
});
}
function highlightAyah(ayahNumber) {
document.querySelectorAll('.ayah-card').forEach(card => card.classList.remove('highlight'));
const currentCard = document.getElementById(`ayah-${ayahNumber}`);
currentCard.classList.add('highlight');
currentCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
function playAyah(ayahNumber) {
const audioUrl = audioPreloaded[ayahNumber - 1].src;
audioSource.src = audioUrl;
audioPlayer.load();
audioPlayer.play();
highlightAyah(ayahNumber);
}
audioPlayer.addEventListener('ended', function() {
if (currentAyah < totalAyahs) {
currentAyah++;
playAyah(currentAyah);
}
});
function preloadAudio(surahAudio) {
let loadedCount = 0;
surahAudio.forEach((ayah, index) => {
const audio = new Audio();
audio.src = ayah.audio;
audioPreloaded.push(audio);
if (index === surahAudio.length - 1) {
ayahLoading.style.display = 'none';
playAyah(currentAyah);
}
});
}
});
</script>
</body>
</html>