AllaTurkaa

Selamlar Allaturkaa Forum ailesi!
Sizler için geliştirdiğimiz, modern cam efektine (Glassmorphism) ve sese duyarlı canlı ekolayzere sahip yeni nesil web radyo çalar scriptini paylaşıyorum.
Tamamen açık kaynak kodlu olan bu projeyi dilediğiniz gibi düzenleyebilir, kendi sitelerinize ve projelerinize rahatlıkla uyarlayabilirsiniz.

Tasarım & Teknik Özellikler

• Modern Arayüz: Şık cam efekti (Glassmorphism), yuvarlatılmış hatlar ve duyarlı (responsive) tasarım.
  
• Canlı Sese Duyarlı Ekolayzer: Müzik oynarken hareket eden dinamik ekolayzer barları.
  
• Dahili Kaydırma Çubuğu (custom-scroll): Listeye 20 veya daha fazla radyo eklense bile taşma yapmayan, şık ve özel kaydırma çubuğu alanı.
  
• Kolay Kontrol: Oynat/Durdur, Tamamen Durdur, Önceki/Sonraki radyo geçişleri, ses seviyesi ayarı ve canlı süre sayacı.
  
• Hazır Kararlı Liste: İçerisinde kesintisiz çalışan yerli ve yabancı popüler radyo yayınları hazır olarak gelmektedir.
  
• Radyoları Değiştirebilir İstediğiniz Kadar Ekleyebilirsiniz.

Akıllı Oynat / Durdur Mantığı: Radyolarda canlı yayın altyapısı kullanıldığı için, durdurup tekrar başlattığınızda ses geriden gelmez; doğrudan o anki anlık canlı akıştan (live stream) oynamaya devam eder.

Özelleştirme Rehberi (Nasıl Düzenlenir?)
Kodlar tamamen açık kaynaklıdır; Notepad++, VS Code veya herhangi bir metin düzenleyici ile kolayca kişiselleştirebilirsiniz:

1. Radyo Listesi ve İsim Değişimi: Kodların alt kısmındaki const songs = [...] dizisi içerisinden radyo isimlerini (name), türlerini/sanatçı bilgilerini (artist) ve yayın linklerini (contentUrl) dilediğiniz gibi ekleyebilir veya değiştirebilirsiniz.
   
2. Ekolayzer Yükseklik Ayarı: <style> etiketleri arasındaki @keyframes equalize kısmından barların dikey yüksekliğini (height: 14px; vb.) kendi zevkinize göre alçaltıp yükseltebilirsiniz.
   
3. Ekolayzer Hız (Ritim) Ayarı: .playing .eq-bar sınıfı içindeki animation: equalize 0.5s ... süresini küçülterek (örneğin 0.3s yaparak) animasyonu hızlandırabilirsiniz.
   
4. Renk ve Ölçü Düzenlemeleri: Arka plan tonlarını, panel genişliklerini ve buton boyutlarını Tailwind CSS sınıfları veya standart CSS kodları üzerinden anında güncelleyebilirsiniz.
   

Hangi Sistemlere Uyumludur?
Bu script tamamen bağımsız HTML5, CSS3 ve JavaScript ile kodlanmıştır. Herhangi bir ekstra veritabanı veya karmaşık sunucu gerektirmez. Rahatlıkla entegre edebileceğiniz platformlar:

• Blogspot (Blogger)
  
• WordPress / Joomla (Özel HTML bileşeni veya iframe ile)
  
• MyBB / WoltLab / Flarum Forum alt yapıları
  
• Düz HTML / PHP tabanlı tüm kişisel web siteleri ve radyo index sayfaları
  

Demo Adres.BURADAN BUYRUN

Ekte Paylaştığım hazır kod bloğunu kopyalayarak kendi sitenize hemen dahil edebilirsiniz:


*Müziğin ritmi hayatınıza neşe, dostluğunuz daim, paylaşımlarınız bereketli olsun; Allaturkaa Forum'da sesiniz hep yüksek ve net duyulsun!*

#Allaturkaa #WebRadyo #Glassmorphism #HTML5 #CSS3 #Seyyah20 #JavaScript #WebTasarim #RadyoScripti #Blogspot #OpenSource #CanliYayin #WebDeveloper #ArayüzTasarimi