• 03-07-2024, 23:37:51
    #1
    Merhabalar yabancı bir kaynaktan verileri alarak ses senkronlu olacak şekilde yasin-i şerif hazırladım tek dosya index.php'den oluşuyor projelerinizde kullanabilirsiniz. Otomatik scrool ayetleri takip eder.

    İndirme Linki:


    https://dosya.co/lt9ykolwew3k/index.php.html

    "kolaylaştırın zorlaştırmayın, müjdeleyin nefret ettirmeyin" (Hadis-i Şerif)"


  • 03-07-2024, 23:40:49
    #2
    Kurumsal PLUS
    virüstotal ekleyebilir misiniz hocam
  • 03-07-2024, 23:44:11
    #3
    Jorphy adlı üyeden alıntı: mesajı görüntüle
    virüstotal ekleyebilir misiniz hocam
    Tabiki.
  • 04-07-2024, 11:56:58
    #4
    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>
  • 04-07-2024, 13:58:26
    #5
    Ellerinize sağlık.

    bilimio adlı üyeden alıntı: mesajı görüntüle
    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>
  • 04-07-2024, 17:00:33
    #6
    bilimio adlı üyeden alıntı: mesajı görüntüle
    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>
    Sure Listesi Yükleniyor...

    Bu sekil yaziyor ama bir turlu yuklenmiyor.. Sebebi ne olabilir?
  • 04-07-2024, 17:21:10
    #7
    tiscali adlı üyeden alıntı: mesajı görüntüle
    Sure Listesi Yükleniyor...

    Bu sekil yaziyor ama bir turlu yuklenmiyor.. Sebebi ne olabilir?
    Nerede çalıştırmayı deniyorsunuz ?
  • 04-07-2024, 17:24:47
    #8
    kozmikkreatif adlı üyeden alıntı: mesajı görüntüle
    Nerede çalıştırmayı deniyorsunuz ?
    CPanel 8.1 php ile..
  • 04-07-2024, 19:40:46
    #9
    tiscali adlı üyeden alıntı: mesajı görüntüle
    CPanel 8.1 php ile..
    Daha düşük bir versiyonda test eder misiniz. Normalde stabil çalışır tek dosya zaten.