AllaTurkaa

Merhaba Değerli Allaturka Forum Üyeleri ve Ziyaretçiler, Sitenize veya forumunuza kolayca entegre edebileceğiniz, mobil uyumlu ve göz yormayan (dark mode) tam özellikli bir Kuran dinleme/oynatma widget'ı hazırladım ve kodunu burada açık kaynak olarak paylaşıyorum!

Bu widget, dünya çapında tanınan hafız Abdur-Rahman as-Sudais'in sesinden tüm Kuran surelerini yüksek kalitede dinleme imkanı sunar.

Widget'ın Temel Özellikleri

Tam Kuran Sure Listesi: Fatiha'dan Nas suresine kadar 114 surenin tamamını içerir.

2. Temiz Liste Formatı: Her sure, numara sırasıyla birlikte Arapça, İngilizce ve Türkçe isimleriyle (1. سُورَةُ ٱلْفَاتِحَةِ (Al-Faatiha) (Fâtiha)) tek bir satırda gösterilir.

3. Gelişmiş Oynatıcı Kontrolleri: Oynat/Durdur/Durdur (Stop) tuşları ve ses seviyesi (Volume) ayarı mevcuttur.

4. Açık Kaynak: Kodun tamamı aşağıdadır. Dilediğiniz gibi alıp kullanabilir, temanıza uyacak şekilde özelleştirebilirsiniz.

Widget Nasıl Özelleştirilir?

Kodun tamamı tek bir HTML dosyası içinde yer almakta olup, HTML (yapı), CSS (tasarım) ve JavaScript (işlevsellik) bölümlerini içerir.

1. Renkler ve Yazı Renkleri Nasıl Değiştirilir?

Renk ayarları, <style> etiketinin hemen başındaki :root bölümünde tanımlanmıştır. Buradaki değişkenleri değiştirerek tüm widget'ın renklerini saniyeler içinde değiştirebilirsiniz:

Değişken AdıAnlamı Varsayılan Değer--bg-darkAna Arka Plan Rengi#222 (Koyu Gri)--bg-mediumOynatıcı Alanı Arka Planı#333 (Orta Gri)--accent-orangeVurgu Rengi (Turuncu)#ff7f00--text-lightBeyaz/Açık Metin Rengi#f4f4f4--text-mutedYardımcı/Yardımcı Metin Rengi#aaa (Gri)

Önemli Not: Liste içindeki Arapça, İngilizce ve Türkçe isimlerin renkleri varsayılan olarak --text-muted (gri) olarak ayarlanmıştır. Bu renkleri değiştirmek için ilgili CSS sınıflarını (.arabic-name, .english-name, .turkish-name) bulup color değerini değiştirebilirsiniz.

2. iframe Ölçüleri / Boyut Nasıl Değişir?

Widget Genişliği: CSS'teki .kuran-widget-wrapper sınıfında bulunan max-width: 350px; değerini istediğiniz piksel değerine çekerek genişliği değiştirebilirsiniz.

Liste Yüksekliği: Sure listesinin kaydırılabilir yüksekliği, .sure-list sınıfında bulunan max-height: 350px; değeri ile kontrol edilir.

3. MP3 Kaynağı (Okuyucu) Değişimi

MP3 dosyaları uluslararası bir CDN (içerik dağıtım ağı) üzerinden çekilmektedir. Kodun üst kısmındaki JavaScript bölümünde bulunan BASE_MP3_CDN_URL değerini değiştirerek okuyucuyu değiştirebilirsiniz.

Şu an ki okuyucu (Abdur-Rahman as-Sudais): JavaScript const BASE_MP3_CDN_URL = 'https://download.quranicaudio.com/quran/abdurrahmaan_as-sudays/';

Başka okuyucular için: https://www.google.com/search?q=kuranicaudio.com sitesini inceleyebilir ve oradaki klasör adlarını kullanarak URL'yi güncelleyebilirsiniz.

Açık Kaynak Kod (HTML/CSS/JS)

Aşağıda kod bulunmamaktadır. Widget'ın tüm kaynak kodunu (HTML/CSS/JS) ekte bulabilirsiniz. Kodu kopyalayıp sitenize veya HTML destekleyen bir widget alanına doğrudan yapıştırabilirsiniz.

Not: Kodun alt kısmında "Powered by Dost Yurdu Radyo" yazısı da yer almaktadır. Değişebilir. Hayırlı paylaşımlar dilerim!