IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası
  sohbet odaları

>
+
Etiketlenen Kullanıcılar

2Beğeni(ler)
  • 1 Post By Nefret
  • 1 Post By Nefret

Yeni Konu aç Cevapla
 
LinkBack Seçenekler Arama Stil
Alt 09 Mayıs 2025, 00:53   #1
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
Radyo Teması Html-Css-Js




HTML, CSS ve JavaScript kullanarak, örnek radyo olarak Radyo Kral Pop radyosunu ekleyip bir radyo player tasarımı yaptım. Radyo yayını arka planda çalarken, şarkı bilgilerini ekranda görüntüleyebiliyorsunuz.


Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DJ Radyo</title> <!-- Google Fonts (Türkçe karakterler için Poppins fontu) --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"> <!-- Font Awesome (ikonlar için) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> <style> body, html { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; /* Poppins fontunu kullanalım */ color: white; } /* Arka Plan Video */ #bgVideo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } /* Üst Menü */ header { position: fixed; top: 0; width: 100%; background: rgba(0, 0, 0, 0.5); padding: 15px 0; text-align: center; z-index: 10; } header nav a { color: white; text-decoration: none; margin: 0 20px; font-weight: bold; font-size: 16px; transition: color 0.3s; } header nav a:hover { color: #ff0055; } /* Radyo Oynatıcı */ .player { text-align: center; margin-top: 150px; background: rgba(0, 0, 0, 0.6); padding: 30px; border-radius: 15px; width: 300px; margin-left: auto; margin-right: auto; box-shadow: 0 0 15px rgba(255,255,255,0.2); } .player h1 { margin-bottom: 20px; } button { padding: 10px 20px; font-size: 16px; background: #ff0055; color: white; border: none; border-radius: 10px; cursor: pointer; transition: background 0.3s; } button:hover { background: #e6004c; } footer { position: absolute; bottom: 10px; width: 100%; text-align: center; background: rgba(0,0,0,0.4); padding: 10px 0; } .social a { color: #fff; text-decoration: none; margin: 0 10px; } .social a:hover { text-decoration: underline; } /* Şarkı adı ve sanatçı */ #songInfo { color: #fff; font-size: 14px; margin-top: 20px; } </style> </head> <body> <!-- Üst Menü --> <header> <nav> <a href="#">Anasayfa</a> <a href="#">Hakkimizda</a> <a href="#">Iletisim</a> </nav> </header> <!-- Arka Plan Videosu --> <video autoplay muted loop id="bgVideo"> <source src="https://
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
type="video/mp4"> Tarayıcınız video öğesini desteklemiyor. </video> <!-- Radyo Oynatıcı --> <div class="player"> <h1>🎧 Radyo Kral Pop</h1> <button onclick="togglePlay()"> <i id="playIcon" class="fas fa-play"></i> <span id="playText">Oynat</span> </button> <audio id="radioStream" src="https://streaming.radionomy.com/Radio-Kral-Pop" autoplay></audio> <div id="songInfo"> <span>Su anda calan sarki: <strong>Yok</strong> - <strong>Yok</strong></span> </div> </div> <!-- Alt Bilgi --> <footer> <p>Canli DJ: DJ Max</p> <div class="social"> <a href="#">Instagram</a> | <a href="#">Twitter</a> </div> </footer> <!-- JavaScript --> <script> const radio = document.getElementById("radioStream"); const playIcon = document.getElementById("playIcon"); const playText = document.getElementById("playText"); const songInfo = document.getElementById("songInfo"); function togglePlay() { if (radio.paused) { radio.play(); playIcon.className = "fas fa-pause"; playText.innerText = "Duraklat"; } else { radio.pause(); playIcon.className = "fas fa-play"; playText.innerText = "Oynat"; } } // Şu anda çalan şarkı bilgisini almak radio.addEventListener('playing', function() { songInfo.innerHTML = "Şu anda çalan şarkı: <strong>Şarkı Adı</strong> - <strong>Sanatçı Adı</strong>"; }); </script> </body> </html>


iyi İfler

 
Alıntı ile Cevapla

IRCForumlari.NET Reklamlar
sohbet odaları reklamver bizimmekan
Alt 09 Mayıs 2025, 08:38   #2
Çevrimiçi
i don't care if i'm misfit.
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
Cevap: Radyo Teması Html-Css-Js




Eline sağlık @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]. Paylaşım için teşekkürler.

__________________
I'm a dreamer but it's getting hard to take it.
Some nights don't know if I'm gonna make it.
Heart is heavy but there's nothing that can break me down.
 
Alıntı ile Cevapla

Alt 09 Mayıs 2025, 12:52   #3
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
Cevap: Radyo Teması Html-Css-Js




Rica ederim efendim iyi forumlar

 
Alıntı ile Cevapla

Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Kapalı
Pingbacks are Açık
Refbacks are Açık


Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
IF kullanıcılarına özel ücretsiz Yeni HTML Radyo v.1.1 teması AEKyazılım HTML/CSS/JavaScript 0 12 Nisan 2025 11:56
IF kullanıcılarına özel ücretsiz HTML radyo teması AEKyazılım HTML/CSS/JavaScript 2 05 Nisan 2025 09:31
Ücretsiz HTML Radyo Teması Absent HTML/CSS/JavaScript 18 15 Aralık 2024 16:19
html sohbet teması Che HTML/CSS/JavaScript 0 23 Nisan 2022 23:05
Ücretsiz Html sohbet teması StynaX Ücretsiz Scriptler 3 03 Mayıs 2018 12:19