AllaTurkaa

Merhaba sevgili forum üyeleri, Sizler için, Fastcast altyapısını kullanan, tamamen yenilenmiş ve görsel açıdan zenginleştirilmiş bir radyo player widgetı hazırladım. Bu player, tamamen açık kaynak olarak paylaşılmıştır. Dilediğiniz gibi düzenleyebilir, geliştirebilir ve kendi sitenize uyarlayabilirsiniz. Bu widget, standart playerların ötesine geçerek estetik ve kullanım kolaylığını birleştiriyor. Geliştirmelerimiz, özellikle çalma butonuna eklenen dinamik dönen ışık efekti, ayarlanabilir ses çubuğu renkleri ve üç farklı tema seçeneği üzerine yoğunlaştı. Bu sayede web sitenizin veya forumunuzun tasarımına en uygun playerı kolayca entegre edebilirsiniz. ### Temel Özellikler ve Temalar Bu widgetın öne çıkan özellikleri: Üç Farklı Tema: Siyah (Yeşil Vurgulu), Mavi ve Turuncu/Siyah. Tek yapmanız gereken, paylaşım kodlarından istediğiniz temayı seçmek. Dinamik Oynatma Efekti: Player çalmaya başladığında, buton etrafında temanın renginde (Yeşil, Mavi veya Turuncu) parlak ve dinamik bir dönen ışık efekti başlar. Tamamen Duyarlı Tasarım: Player, hem masaüstü hem de mobil cihazlarda sorunsuz çalışacak şekilde tasarlanmıştır. Gelişmiş Ses Kontrolü: Mouse ile sürükleyerek veya tıklayarak hassas ses ayarı yapılabilir ve sesi açıp kapatma (mute) özelliği bulunur. Harici Oynatıcı Bağlantıları: Winamp, VLC, WMP gibi harici playerlar için hazır bağlantılar içerir. ### Tema Seçimi ve Özelleştirme Rehberi (Renk ve Ölçü Değiştirme) Paylaştığımız tam kod bloğu içinde 3 farklı HTML bölümü bulunmaktadır. Kendi sitenizde kullanmak istediğiniz temanın kod bloğunu seçmeniz yeterlidir. Bu bloklar, kod içinde şu ayırıcı satırlarla işaretlenmiştir: Turuncu Player için: *** BAŞLANGIÇ: PLAYER 3 (TURUNCU TEMA) *** ile başlayan blok. Mavi Player için: *** BAŞLANGIÇ: PLAYER 2 (MAVİ TEMA) *** ile başlayan blok. Siyah/Yeşil Player için: *** BAŞLANGIÇ: PLAYER 1 (SİYAH TEMA - YEŞİL) *** ile başlayan blok. #### A. Renk Değiştirme (Gelişmiş Kullanıcılar İçin) Widgetın vurgu renklerini değiştirmek için kodun başındaki style bölümünü düzenlemeniz gerekir. 1. Siyah/Yeşil Tema Renk Değişiklikleri: Ses Çubuğu (Sınıf: .vol-bar ): CSS'teki background-color: #4CAF50; (Yeşil Ton) değerini istediğiniz rengin HEX kodu ile değiştirin. Dönen Efekt: Dönen ışık efekti için kullanılan box-shadow değerlerindeki #66BB6A ve rgba(...) içindeki renk kodlarını yeni vurgu renginize göre güncelleyin. 2. Turuncu Tema Renk Değişiklikleri: Ses Çubuğu: Sınıfı .player-widget.orange-theme .vol-bar olan kuraldaki background-color: #FF9800; (Turuncu Ton) değerini değiştirin. Dönen Efekt: Kuralı #radioWidgetOrange.is-playing .play-btn-wrapper::before olan yerdeki #FFA726 değerlerini yeni renginizle güncelleyin. #### B. Ölçü Değiştirme Playerın toplam genişliğini ve yüksekliğini değiştirmek oldukça basittir. CSS bölümündeki .radio-player-container kuralını bulun. Genişlik: width: 600px; Yükseklik: height: 100px; Bu değerleri istediğiniz piksel (px) ölçüsüne getirerek playerın boyutlarını kolayca ayarlayabilirsiniz. ### Player Entegrasyonu (IFRAME ve Normal Kod Ekleme) Playerı web sitenize eklemek için iki ana yöntem bulunmaktadır. #### Yöntem 1: Doğrudan HTML Kodu Ekleme (Önerilen Yöntem) Bu, tüm CSS, HTML ve JavaScript kodunu tek bir sayfaya eklemeniz anlamına gelir. En esnek ve geliştirilebilir yöntemdir. Tam kod bloğunu (style bölümünden //script bölümüne kadar) kopyalayın. Web sitenizin HTML kodunda, playerın görünmesini istediğiniz yere yapıştırın. #### Yöntem 2: IFRAME ile Ekleme (Basit ve Hızlı Yöntem) Eğer playerı farklı bir sayfada barındırıp ana sitenizde kullanmak istiyorsanız: Player kodunu (CSS, HTML, JS dahil) sadece bir temayı seçerek ayrı bir HTML dosyasına kaydedin (örneğin: player-widget.html). Bu dosyayı web sunucunuzda bir yere yükleyin. Ana sayfanızda, IFRAME kod yapısını kullanın: *** Örnek IFRAME Kodu - Direkt Çalıştırmayınız *** IFRAME etiketi kullanılarak, width="600" ve height="125" değerleriyle HTML dosyanız sayfaya çağrılır. *** Kod Sonu *** (Not: width ve height değerlerini CSS'teki .radio-player-container ölçülerine göre ayarlamayı unutmayın. Height için 25px fazladan pay bıraktık.) Başarılar dileriz, sorularınız olursa bu başlık altından bize ulaşabilirsiniz!