AllaTurkaa

Selamlar değerli forum sakinleri,
bugün sizlere üzerinde titizlikle çalıştığımız ve hem görsel hem de teknik açıdan çıtayı yukarı taşıyan Dost Yurdu Hi-Res Player V4.6 projesini tanıtmak istiyorum.
Bu sadece bir müzik çalar değil, web siteleriniz veya kişisel projeleriniz için özel olarak optimize edilmiş, mobil uygulama estetiğine sahip profesyonel bir medya arayüzüdür.
Altın sarısı (Gold) detayları ve derin siyah (Dark) temasıyla premium bir hissiyat sunan bu player, kullanıcıyı ilk bakışta etkilemeyi hedefliyor.


Öne Çıkan Görsel ve Teknik Özellikler

• Dinamik Spektrum Analizörü: Müziğin ritmine göre gerçek zamanlı tepki veren 15 kanallı mini ekolayzer sistemi.
  
• Hi-Res Ses Desteği: DSD (Direct Stream Digital) badge ve teknik bilgi paneli ile yüksek kaliteli ses hissiyatı.
  
• Akıllı Çalma Listesi: 20 farklı parça kapasiteli, özel scroll bar yapısına sahip, kolay erişilebilir liste yönetimi.
  
• İnteraktif Arayüz: Çalan parçaya göre hareketlenen (pulse effect) albüm kapağı animasyonu ve pürüzsüz geçiş efektleri.
  
• Tam Kontrol Seti: Ses seviyesi sürgüsü, canlı yayın uyumlu süre göstergesi ve otomatik tekrar (loop) modu.
  
• Sosyal Entegrasyon: Tek tıkla Facebook, WhatsApp, X ve Telegram gibi platformlarda paylaşım yapabilme imkanı.
  
• Dinamik Durum Çubuğu: Gerçek zamanlı dijital saat, sinyal gücü ve batarya göstergesi ile tam bir telefon arayüzü deneyimi.
  

Teknik Detaylar ve Kullanım
Bu player tamamen HTML5, CSS3 ve Vanilla JavaScript kullanılarak kodlanmıştır, yani herhangi bir ağır kütüphaneye ihtiyaç duymadan ışık hızında çalışır.
Font Awesome ikon seti ile zenginleştirilen arayüz, responsive (uyumlu) yapısı sayesinde tüm cihazlarda kusursuz görünür.
Çalma listesini kod içerisindeki songs dizisinden kolayca güncelleyebilir, kendi ses dosyalarınızı ve kapak görsellerinizi saniyeler içinde ekleyebilirsiniz.

Player'ı Kendinize Göre Özelleştirin
Player'ı sitenize ekledikten sonra kendi içeriklerinizi tanımlamak ve tasarımı değiştirmek oldukça basittir. İşte adım adım özelleştirme rehberi:
1. Şarkı ve Resim Listesini Güncelleme
Kodun en alt kısmındaki <script> etiketleri arasında yer alan const songs dizisini bulun. Her parça için şu formatı takip edebilirsiniz:

• n: Şarkı veya yayın adı.
  
• a: Albüm veya sanatçı ismi.
  
• l: Ses dosyasının linki (mp3, wav veya radyo stream linki).
  
• i: Kapak fotoğrafının linki.
  

2. Renk Temasını Değiştirme
Tasarım "Gold" (Altın) konseptiyle hazırlanmıştır ancak sitenizin renklerine uydurmak için CSS kısmındaki :root bölümünü düzenlemeniz yeterlidir:

• --gold: Ana vurgu rengi (ikonlar ve başlıklar).
  
• --red: Progress bar ve aktif menü rengi.
  
• --bg: Telefonun iç arka plan rengi.
  

Teknik İpucu (Kullanıcılar İçin)
Kendi resimlerinizi eklerken en iyi görsel sonuç için kare formatlı ($500 \times 500$ gibi) görseller kullanmanızı öneririm. Eğer radyo yayını yapacaksanız, süre kısmında otomatik olarak "CANLI" ibaresi görünecek şekilde kodlanmıştır.


Seyyah olarak bu projeyi geliştirirken her seviyeden kullanıcının kolayca düzenleyebileceği sade bir yapı kurmaya özen gösterdim. Herhangi bir kod hatası alırsanız veya renk kodları konusunda yardıma ihtiyacınız olursa yorumlarda belirtebilirsiniz!


Proje Bilgileri (Kısa Özet)

• Yapımcı: DOST YURDU PROJECT
  
• Versiyon: 4.6
  
• Lisans: Ücretsiz / Geliştirilebilir
  
• Özellik: Sese Duyarlı EQ & Akıllı Navigasyon
  

Görüş ve önerilerinizi merakla bekliyorum.
Ses, ruhun dilidir; kaliteli bir arayüz ise o dilin en güzel tercümanıdır.