Merhaba değerli forum sakinleri,
bugün sizlere kendi sitem için geliştirdiğim, görselliğiyle büyüleyen ve tamamen kullanıcı dostu olan
"Dynamic Gradient Radio Player" çalışmamı paylaşıyorum.
Bu player, klasik sabit renkli barlardan sıkılanlar için tasarlandı. Sayfanın en üstüne (header üstü) yapışır ve arka planı siz hiç dokunmadan 6 farklı asil renk arasında yumuşak geçişler yapar.
Öne Çıkan Özellikler:
- Dinamik Arka Plan: 6 farklı renk (Teal, Turuncu, Mor, Yeşil, Bordo, Lacivert) arasında 30 saniyelik çok soft geçişler.
- Gerçek Zamanlı Canlı Yayın: Durdurup açtığınızda önbelleği temizler, yayına kaldığı yerden değil, o saniyedeki canlı akıştan devam eder.
- Şarkı Bilgisi (Auto-Update): Çalan şarkı ve sanatçı ismi otomatik olarak güncellenir ve kayan yazı (marquee) efektiyle görünür.
- Glassmorphism Tasarım: Ses kontrol alanı ve butonlar modern "buzlu cam" efektiyle hazırlanmıştır.
- Full Responsive: Masaüstü ve mobil uyumludur, her ekranda kendini ayarlar.
Nasıl Özelleştirilir? (Sıkça Sorulan Sorular)
1. Yayın Bilgilerini Nasıl Değiştiririm? Kodun en altındaki audio etiketindeki src kısmına kendi yayın linkinizi, cc_streaminfo kısmındaki data-username alanına ise kendi Shoutcast/Icecast kullanıcı adınızı yazmanız yeterlidir.
2. Boyu Uzar mı, Kısalır mı? CSS içindeki .fixed-radio-bar_TOP sınıfındaki height: 55px; değerini değiştirerek player'ı istediğiniz kalınlığa getirebilirsiniz. (Değiştirirseniz body { padding-top: 55px; } değerini de aynı yapmayı unutmayın!)
3. Kendi Renklerimi Ekleyebilir miyim? Tabii ki! background: linear-gradient kısmındaki HEX kodlarını (#...) kendi sevdiğiniz renklerle değiştirebilirsiniz. İstediğiniz kadar renk ekleyip çıkarabilirsiniz.
4. Sosyal Medya Linklerini Nasıl Bağlarım? Kodun içindeki social-icons_TOP alanında bulunan href="#" kısımlarına kendi sayfa linklerinizi yapıştırmanız yeterli.
5. Ses Özellikleri Neler? Player özel bir "Mute" (Sessiz) mantığına sahiptir. Ses çubuğunu en sola çektiğinizde ikon otomatik değişir. Ayrıca her "Play" tuşuna basıldığında yayın senkronizasyonu için otomatik "cache-busting" yapar.
Kurulum:
Aşağıdaki kodları sitenizin index.php veya header.tpl dosyasında <body> etiketinin hemen altına yapıştırmanız yeterlidir.
DEMO ADRESİ: BURADAN BUYRUN
*Kelimelerin bittiği yerde müzik başlar, müziğin renklerle buluştuğu yerde ise huzur... Sesiniz gür, yayınınız renkli, dinleyiciniz bol olsun.*
Genel Bilgiler »
SABİT Radyo ALLATURKA 24/7 CANLI YAYIN Player'ları (Mobil Uyumlu)
(1.10.2025, 00:56)
