Merhaba Değerli Allaturka Forum üyeleri ve Ziyaretçiler,
Sizlere forum sayfalarınızda kullanabileceğiniz, teknik anlamda güncel ve görsel açıdan çok etkileyici iki farklı Radyo Oynatıcı Widget seçeneği sunmaktan mutluluk duyuyoruz. Her iki widget da canlı yayın, anlık şarkı/dinleyici bilgisi gibi dinamik özellikler sunar.
Bu oynatıcılar, daha önce sıkça karşılaşılan "Bağlantı Hatası (CORS)" gibi tarayıcı kısıtlamalarını aşacak şekilde, radyo servis sağlayıcımız FastCast4U'nun özel script'i entegre edilerek geliştirilmiştir.
İKİ FARKLI GÖRSEL SEÇENEĞİ
Aşağıda tüm sitelere uyumlu olarak hazırlanan, iki farklı görsel alana sahip kodları bulacaksınız. Beğendiğinizi seçip kullanabilirsiniz:
Seçenek 1: Sürekli Dönen Video Gösterimli Player (Playlist YOK)
Bu seçenek, radyonuzun tanıtım videosunun oynatıcının üst kısmında otomatik ve döngüsel olarak gösterilmesini sağlar. Canlı bir atmosfer yaratmak için idealdir ve alt kısmında sabit bir çalma listesi içermez.
Seçenek 2: Sürekli Değişen Resimli Player (Görsel Playlist VAR)
Bu seçenek, her yenilemede rastgele bir görselin (resimli) yer almasını sağlar. Ayrıca alt kısmında görsel amaçlı dört şarkılık bir çalma listesi içerir. Daha sade, ama detaylı bir görünüm tercih edenler için uygundur.
Kodu Kolayca Özelleştirme ve Geliştirme Rehberi
1. Yayın Linkini Değiştirme (Stream Linki)
Radyo yayınının çalınan linki, her iki kodda da <audio> etiketi içinde yer alır. Eğer ileride yayın adresiniz değişirse, aşağıdaki örnek adresi yeni adresle değiştirmeniz yeterlidir:
|
Kaynak kod
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<audio id="indexPlayer" autoplay="true" preload="metadata" class="hidden-audio" loop>
<source src="https://eu4.fastcast4u.com/proxy/allaturka?mp=/1" type="audio/mpeg">
Tarayıcınız bu ses oynatıcıyı desteklemiyor.
</audio>
<div class="album-cover-area"></div>
<div class="current-track-info">
<span class="stream-artist-name">Yayındaki Sanatçı</span>
<a class="stream-song-title cc_streaminfo" data-type="song" data-username="allaturka" href="#">Yükleniyor...</a>
<span class="stream-listeners cc_streaminfo" data-type="listeners" data-username="allaturka"></span>
<script src="https://eu4.fastcast4u.com/system/streaminfo.js"></script>
</div>
|
2. Görsel Alanı Değiştirme (Video veya Resim) ve Ölçüler
Görsel alanının genişliği her iki kodda da CSS içinde width: 330px; olarak ayarlanmıştır. Farklı bir genişlik istiyorsanız, bu değeri CSS'te değiştirebilirsiniz.
|
Kaynak kod
|
1
2
3
|
Video Değişikliği (Seçenek 1): Video linki, <video> etiketi içindeki <source src="**https://archive.org/download/hosgeldiniz_202412/Ho%C5%9Fgeldiniz.mp4**"> kısmında yer alır. Burayı kendi video linkinizle güncelleyebilirsiniz.
Resim Değişikliği (Seçenek 2): Resim linki, CSS kodundaki .album-cover-area içinde yer alan background-image: url('**https://picsum.photos/400/300?random=1**'); kısmında bulunur.
|
3. Renkler ve Genel Geliştirilebilirlik
Widget'ın ana renk teması, her iki kodun da CSS bölümünün en başındaki :root alanında tanımlanmıştır. Renkleri değiştirmek isterseniz, bu alandaki altı farklı renk kodunu (hex) güncelleyebilirsiniz. Bu sayede widget'ı tamamen forum temanıza uygun hale getirebilirsiniz.
Örnek olarak koyduğumuz Bu güzel video içeriği için başta Dilber Hanım olmak üzere emeği geçen herkese teşekkürlerimizi sunarız. Beğendiğiniz widget'ı seçip sitenize ekleyerek radyo deneyiminizi bir üst seviyeye taşıyabilirsiniz.
Kodlar Ekte verilmiştir.
Keyifli dinlemeler ve verimli forum kullanımları dileriz!