AllaTurkaa

Selam Allaturka Ailesi!
Forumumuzun müzik ve eğlence atmosferine yakışır, tamamen modern iOS 18 / Apple Music çizgisinde geliştirdiğimiz web radyo player projesini sizlerle paylaşıyorum.
Tamamen açık kaynak kodludur; dilediğiniz gibi kodları kurcalayabilir, renklerini değiştirebilir, kendi radyolarınızı ekleyebilir veya sitenize kolayca entegre edebilirsiniz.
Göz yormayan şık yarı saydam cam efekti (glassmorphism) ve çalarken hareketlenen silik burgu tarzı ilerleme çubuğuyla radyo keyfini doruklarda yaşayın!


Öne Çıkan Özellikler:

• iOS Minimalist Arayüz: Kompakt, şık ve mobil uyumlu tasarım.
  
• Canlı Burgu Animasyonu: Yayın aktifken çubuk içinde yumuşakça akan özel iki renkli (kirli beyaz & koyu gri) zarif akış efekti.
  
• Canlı Yayın Optimizasyonu: Kesintisiz ve akıcı radyo akışları.
  
• Özelleştirilebilir & Açık Kaynak: Renkler, boyutlar ve çalma listesi tamamen sizin kontrolünüzde.
  

Hangi Sistemlere Uygun?
Bu player saf HTML5, CSS3 ve Vanilla JavaScript ile yazılmıştır. Ekstra ağır kütüphaneler veya eklentiler gerektirmez. Bu sayede;

• Blogspot (Blogger)
  
• WordPress / Joomla
  
• Özel Flarum / MyBB / WoltLab forum siteleri (HTML widget alanları)
  
• Veya doğrudan kendi sunucunuzda statik bir sayfa olarak (index.html) sorunsuz bir şekilde çalışır.
  

Nasıl Düzenlenir? (Kullanım Rehberi)
Kodu kendinize göre uyarlamak oldukça basittir. Kod bloğunun içindeki script etiketleri arasında şu ayarları kolayca yapabilirsiniz:

1. İster Radyo Yayını İster Müzik Linki Nasıl Eklenir?
   Kodların alt kısmındaki songs dizisini bulun. İster Shoutcast/Icecast canlı radyo yayını linkinizi (mp3/stream uzantılı) ister direk bir müzik dosyası linkini şu formatta ekleyebilirsiniz:
2. JavaScript
   const songs = [ { name: "RADYONUZUN ADI", artist: "MÜZİK TÜRÜ", cover: "Görsel_Linkiniz", contentUrl: "Radyo_Stream_Linkiniz" }, // Yeni radyo eklemek için alt alta çoğaltabilirsiniz ];
   
3. Player'ın Boyutu Değişir mi? Evet. Ana kartın sınıfındaki max-w-[340px] değerini küçülterek (max-w-[300px]) veya büyüterek player'ın enini sitenize göre ayarlayabilirsiniz.
   
4. Renkleri Değiştirebilir miyiz? Tamamen sizin zevkinize kalmış! CSS kısmındaki .screw-progress alanından burgu renklerini, body veya ios-card sınıflarından ise genel arayüz arka plan tonlarını dilediğiniz gibi özelleştirebilirsiniz.
   

Önemli Bir Not (Yayın Akışı Hakkında):
Canlı radyo yayınlarının doğası gereği, player üzerindeki durdur (pause) tuşuna bastığınızda yayın tamamen durur ve veri harcaması kesilir. Tekrar oynat (play) tuşuna bastığınızda ise kaçırdığınız saniyeler geri alınmaz; doğrudan o anki en güncel canlı yayın saniyesinden akışa devam eder. Böylece geçmişi değil, her zaman taze yayını dinlemiş olursunuz!

Varsayılan Kanal Listesi:

1. RADYO ALLATURKAA (SLOW)
   
2. DOST YURDU RADYO (İSLAMİ)
   
3. GURBETTEYİM FM (TÜRKÜ)
   
4. RADYO 45LİK (45LİK)
   
5. EURODANCE 90 (POP)
   
6. İstediğiniz Kadar Radyo veya Müzik Linki Ekleyebilirsiniz.

Demo Görünüm: BURADAN BUYRUN

*Müziğin ritmi, kodun özgürlüğüyle buluşur; ses dalgaları dostlukla çoğalır.*


#WebRadyo #RadyoPlayer #HtmlCss #Seyyah20 #OpenSource #Allaturkaa #IosDesign #CanliRadyo #Script #WebTasarim